js实现拖放 · 前端

# js实现拖放 ~~~ <!DOCTYPE HTML> <html> <head> <style type="text/css"> #div1 { float: left; width: 100px; margin: 10px; padding: 10px; border: 1px solid #aaaaaa; } #div2 { float: left; width: 200px; margin: 10px; padding: 10px; border: 1px solid #aaaaaa; } </style> </head> <body> <div id="div1" draggable="true"> div1 </div> <div id="div2" draggable="true"> div2 </div> <script> var divs = document.querySelectorAll('div'); for (var i = 0; i < divs.length; i++) { // 用户开始拖拉时，在被拖拉的节点上触发，该事件的target属性是被拖拉的节点。 // 通常应该在这个事件的监听函数中，指定拖拉的数据。 divs[i].addEventListener('dragstart', dragStart); // 拖拉到当前节点上方时，在当前节点上持续触发（相隔几百毫秒），该事件的target属性是当前节点。 // 如果想要在目标节点上放下的数据，首先必须阻止这两个事件的默认行为。 divs[i].addEventListener('dragover', dragOver); // 被拖拉的节点或选中的文本，释放到目标节点时，在目标节点上触发。 // 注意，如果当前节点不允许drop，即使在该节点上方松开鼠标键，也不会触发该事件。 divs[i].addEventListener('drop', drop); } var src = null; function dragStart(e) { src = e.target; // 所有拖拉事件的实例都有一个DragEvent.dataTransfer属性，用来读写需要传递的数据。 // DataTransfer.setData()方法用来设置拖拉事件所带有的数据。该方法没有返回值。 // 方法接受两个参数，都是字符串。第一个参数表示数据类型（比如text/plain），第二个参数是具体数据。 e.dataTransfer.setData("text/html", src.innerHTML); } function dragOver(e) { e.preventDefault(); } function drop(e) { e.preventDefault(); console.log(e.target); console.log(src); console.log(e.dataTransfer.getData("text/html")); if (e.target !== src) { src.innerHTML = e.target.innerHTML; // DataTransfer.getData()方法接受一个字符串（表示数据类型）作为参数，返回事件所带的指定类型的数据（通常是用setData方法添加的数据）。 // 如果指定类型的数据不存在，则返回空字符串。 e.target.innerHTML = e.dataTransfer.getData("text/html"); } } </script> </body> </html> ~~~