• html
  • 简介
  • API
  • 步骤
  • DataTransfer
🀢

大意

setData() 储存数据

开始拖动， dragstart 事件发生，使用 setData() 方法把要拖动的数据存入 DataTransfer 。

DataTransfer 对象专门用来储存拖放元素操作时要传输的数据，可以通过拖放元素对象的 dataTransfer 属性进行访问。 DataTransfer 对象有两个重要的方法： settData() 和 getData() 。其中， setData 方法倾向于 DataTransfer 对象传递值，而另一个是读取值。

setData() 方法的第一个参数为携带数据的类型（ MIME ，），第二个参数为要携带额外数据。

  • "text/plain": 文本文字
  • "text/html": HTML 文字
  • "text/xml": XML 文字
  • "text/uri-list": URL 列表，每一个 URL 为一行
✂️
js
dt.setData('text/plain', this.id);

禁止目标元素默认事件

针对拖放的目标对象，应该在 dragend 或 dragover 事件内调用事件对象的 preventDefault() 方法阻止默认执行为

✂️
js
dest.addEventListener(
  'dragend',
  function (event) {
    event.preventDefault();
  },
  false,
);

获取数据

给目标对象接受被拖放元素后，执行 getData() 方法从 DataTransfer 对象获取数据。 getData() 方法包含一个参数，参数为 setData() 方法中指定的数据类型，如 "text/plain"

禁止目标元素 drop 默认事件

要实现拖放过程，还需要在目标元素的 drop 事件中关闭默认行为处理。，否则不接受被拖放元素

✂️
js
dest.addEventListener(
  'drop',
  function (event) {
    event.preventDefault();
    event.stopPropagation();
  },
  false,
);

禁止整个页面的默认事件

要实现拖放，还应设置真整个页面的不执行默认处理，否则拖放处理无法进行

✂️
js
document.ondragover = function (event) {
  event.preventDefault();
};
document.ondrop = function (event) {
  event.preventDefault();
};

完整的步骤

✂️
html
<head>
  <style>
    #drag {
      width: 200px;
      height: 200px;
      background-color: #f0f;
      border-radius: 12px;
      text-align: center;
      line-height: 200px;
      color: #ff0;
    }
    #target {
      position: relative;
      left: 1000px;
      top: 100;
      width: 400px;
      height: 400px;
      border: 1px dotted #00f;
      margin: -100px 12px 12px; /* float: right; */
      overflow: auto;
      padding: 2rem 0;
    }
    #target h1 {
      text-align: center;
      width: 100%;
      position: relative; /* background-color: #; */
      z-index: 100;
      top: 0;
      left: 0;
      text-align: center;
      color: #0f0;
      margin: 6px 0;
      font-size: 16px;
    }
  </style>
</head>
<body>
  <div id="drag" draggable="true">圆圆的屁股</div>
  <div id="target"><h1>大大的脸</h1></div>
</body>
<script>
  function init() {
    let source = mi('drag');
    let dest = mi('target');
    e(source, 'dragstart', function (event) {
      let d = event.dataTransfer;
      d.effectAllowed = 'all';
      d.setData('text/plain', this.innerHTML);
    });
    e(dest, 'dragend', function (event) {
      event.preventDefault();
    });
    e(dest, 'drop', function (event) {
      var t = event.dataTransfer;
      var x = t.getData('text/plain');
      dest.innerHTML += '<p>' + x + '</p>';
      event.preventDefault();
      event.stopPropagation();
    });
  }
  init();
  document.ondragover = function (event) {
    event.preventDefault();
  };
  document.ondrop = function (event) {
    event.preventDefault();
  };
  function mi(id) {
    return document.querySelector('#' + id);
  }
  function e(n, event, fn) {
    if (n.nodeType != 1 && mi(n) != null) {
      n = mi(n);
    } else if (n.nodeType == 1) {
      n = n;
    } else if (n.nodeType != 1 && mi(n) == null) {
      throw new Error('为捕获元素');
    }
    if (n.addEventListener) {
      n.addEventListener(event, fn, false);
    } else if (n.attachEvent) {
      n.attachEvent('on' + event, fn);
    } else {
      n['on' + event] = fn;
    }
  }
</script>