今天想用jquery来实现div的拖放功能

Posted 2020-08-17 小蚊子飞

html5标签。拖放（Drag 和 drop）是 HTML5 标准的组成部分。

步骤一：首先设置标签可以被拖 draggable="true"
步骤二：选取被拖的标签，和要放置被拖标签的容器标签。
步骤三：input框默认可以接收text,但div是拒绝接收一切内容，所有此时要记得阻止div的默认行为。

拖放标签的所拥有的事件 dragstart事件 drag事件 dragend事件

对于被放置的标签而言所拥有的事件

1. dragenter事件（拖放目标进去）
2. dragover 事件 （目标标签在里面移动）
3. 如果移除放置标签 会出发dragleave 事件
4. 如果把拖放的标签放到了放置标签里面去 会触发drop事件

注意

1. 每一个标签都有一个可以接收的数据类型 是需要在dragover事件中阻止他的默认行为
2. 火狐浏览器上海需要在 dragenter事件中阻止他的默认行为 event.preventDefault
3. 不同标签代表的数据也是不同的 a标签href地址

在拖放标签dragstart事件中 通过event.dataTransfer.setData() 方法设置被拖的数据

在放置区域drop事件中通过 event.dataTransfer.getData(‘text‘)方法设置接收数据的类型

//拖拽div开始的时候触发
img.addEventListener(‘dragstart‘, function(event) {
    console.log(1);
     event.dataTransfer.setData(‘Text‘,event.target.id);
}, false);

//在拖放的过程中，会一直不停地触发drag事件
// div.addEventListener(‘drag‘, function() {
//     console.log(‘drag‘);
// }, false);

//拖放结束的时候，触发dragend事件
div.addEventListener(‘dragend‘, function() {
    console.log(‘dragend‘);
}, false);

//对于被放置的标签而言，所拥有的事件
//如果有正在被拖放的标签进入到此标签里面，触发dragenter事件
big.addEventListener(‘dragenter‘, function() {
    console.log(‘dragenter‘);//火狐在开始进入就要阻止其默认行为
}, false);

big.addEventListener(‘dragover‘, function(event) {
    event.preventDefault();//阻止默认行为：div是默认为不接受东西
    console.log(‘dragover‘);
}, false);

//如果移出了放置标签，触发dragleave事件
big.addEventListener(‘dragleave‘, function(event) {
    event.preventDefault();
    console.log(‘dragleave‘);
}, false);

//如果把拖放的标签放在放置标签里，就会触发标签的Drop事件
big.addEventListener(‘drop‘, function(event) {
    // console.log(‘drop‘);
    // big.innerHTML = big.innerHTML + event.dataTransfer.getData(‘jpg‘);
    event.preventDefault();
    var data=event.dataTransfer.getData("Text");
    event.target.appendChild(document.getElementById(data));

}, false);

div.addEventListener(‘drop‘, function(event) {
    // console.log(‘drop‘);
    // big.innerHTML = big.innerHTML + event.dataTransfer.getData(‘jpg‘);
    event.preventDefault();
    var data=event.dataTransfer.getData("Text");
    event.target.appendChild(document.getElementById(data));

}, false);