dataTransfer 实现拖拽功能

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>通过拖放实现添加、删除</title>
    <style type="text/css">
      div>div {
        display: inline-block;
        padding: 10px;
        background-color: #aaa;
        margin: 3px;
      }
    </style>
  </head>
  <body>
    <div style="width:600px;border:1px solid black;">
      <h2>可将你喜欢的项目拖进收藏夹</h2>
      <div draggable="true" ondragstart="dsHandler(event);">项目1</div>
      <div draggable="true" ondragstart="dsHandler(event);">项目2</div>
      <div draggable="true" ondragstart="dsHandler(event);">项目3</div>
      <div draggable="true" ondragstart="dsHandler(event);">项目4</div>
      <div draggable="true" ondragstart="dsHandler(event);">项目5</div>
    </div>
    <div id="dest" style="width:400px;height:400px;border:1px solid black;float:left;">
      <h2 ondragleave="return false">收藏夹</h2>
    </div>
    <div id="gb" draggable="false" style="float:left;width:100px;height:100px;border:1px solid black;">垃圾桶</div>
    <script type="text/javascript">
      var dest = document.getElementById("dest");
      //开始拖动事件的事件监听器
      var dsHandler = function(evt) {
        //将被拖动元素的innerHTML属性值设置成被拖动的数据
        evt.dataTransfer.setData("text/plain", "<item>" + evt.target.innerHTML);
      }
      dest.ondrop = function(evt) {
        var text = evt.dataTransfer.getData("text/plain");
        console.log('ondrop', text)
        //如果text以<item>开头
        if (text.indexOf("<item>") == 0) {
          //创建一个新的div元素
          var newEle = document.createElement("div");
          //以当前时间为该元素生成一个唯一的ID
          newEle.id = new Date().getUTCMilliseconds();
          //该元素内容为“拖”过来的数据
          newEle.innerHTML = text.substring(6);
          //设置该元素允许拖动
          newEle.draggable = "true";
          //为该元素的开始拖动事件指定监听器
          newEle.ondragstart = function(evt) {
            //将被拖动元素的id属性值设置成被拖动的数据
            evt.dataTransfer.setData("text/plain", "<remove>" + newEle.id);
          }
          dest.appendChild(newEle);
        }
      }
      // 当把被拖动元素“放”到垃圾桶上时激发该方法。
      document.getElementById("gb").ondrop = function(evt) {
        var id = evt.dataTransfer.getData("text/plain");
        // 如果id以<remove>开头
        if (id.indexOf("<remove>") == 0) {
          // 根据“拖”过来的数据,获取被拖动的元素
          var target = document.getElementById(id.substring(8));
          // 删除被拖动的元素
          dest.removeChild(target);
        }
      }
      document.ondragover = function(evt) {
        // 取消事件的默认行为
        return false;
      }
      document.ondragleave = function(evt) {
        //取消被拖动的元素离开本元素时触发该事件
        return false;

      }
      document.ondrop = function(evt) {
        // 取消事件的默认行为
        return false;
      }
    </script>
  </body>
</html>

标签: none

添加新评论