HTML5--拖拽事件与DataTransfer对象

需求分析   -- 生产开发中元素的拖拽是一个相当常见的需求，这就需要用到draggable这个属性以及对应的拖拽相关事件

如果想要拖动某个元素那么首先就需要给其一个draggable属性，并将该属性设置为true

拖放事件

　　拖放的过程中被拖放的对象称为源对象，拖放过程中间经过的其他对象被称为过程对象，最终到达的目标区域叫做目标对象，拖放事件可以用这几个对象来进行分类，不同的事件会被不同的对象触发

　　源对象 

　　　　　dragstart : 源对象开始拖放，开始移动事件触发

　　　　　  drag : 源对象拖放过程中，移动被拖拽对象触发

　　　　　  dragend : 源对象拖放结束，整个拖放操作结束时触发

　　过程对象

　　　　　dragenter : 源对象进入过程对象范围内，被拖拽对象进入过程时被触发

　　　　　  dragover : 源对象在过程对象范围内移动，被拖拽对象在过程对象内移动时触发

　　　　　  dragleave : 源对象离开过程对象的范围，被拖拽对象离开目标对象时触发

　　目标对象

　　　　　drop：源对象拖放到目标对象中，目标对象完全接受被拖拽对象时触发，可理解为在目标对象内松手时触发

dataTransfer对象 -- 在所有的拖放事件中都提供了一个数据传输对象dataTransfer,主要作用于源对象和目标对象之间的传递数据

　　setData(format,data)

　　　　　设置拖拽事件中要传递的数据，format的参数为数据类型

　　　　　该方法向dataTransfer中对象中存入数据，接受两个参数，第一个表示要存入的数据类型，共有四种

　　　　　　　text/plain

　　　　　　　text/html

　　　　　　　text/xml

　　　　　　　text/uri-list

　　　　  第二个参数为要存入的数据，例如event.dataTransfer.setData('text/plain','hellow draggable')

　　　getData(format)

　　　　　获得拖拽事件中传递的数据，format参数为数据结构

　　　　　该方法从dataTransfer对象中存储的数据，参数为在setData方法中指定的数据类型，例如:event.dataTransfer.getData('text/plain')

　　　clearData()

　　　　　该方法清空dataTransfer对象中存储的数据，参数可选，为数据类型。若为空，则清空所有数据

例子

<!DOCTYPE HTML>
<html>
<head>
    <style type="text/css">
        #box1, #box2, #box3{
            width: 200px;
            height: 300px;
            border-radius: 10px; 
            border: 1px solid #333;
            float: left;
            margin-left: 20px; 
        }
        #item1,#item2,#item3,#item4 {
            width: 90%;
            margin: 0 auto;
            border-radius: 10px; 
            height: 50px;
            border: 1px solid #333;
            margin-top: 10px;
            text-align: center;
            line-height: 50px;
        }
    </style>
</head>
 
<body>
    <div id="box1" ondragover="allowDropIn(event)" ondrop="drop(event)">
        <div id="item1" draggable="true" ondragstart="drag(event)">方块一</div>
        <div id="item2" draggable="true" ondragstart="drag(event)">方块二</div>
        <div id="item3" draggable="true" ondragstart="drag(event)">方块三</div>
    </div>
    <div id="box2" ondragover="allowDropIn(event)" ondrop="drop(event)">
        <div id="item4" draggable="true" ondragstart="drag(event)">方块四</div>
    </div>
    <div id="box3" ondragover="allowDropIn(event)" ondrop="drop(event)">
    </div>
</body>
<script type="text/javascript">
    function allowDropIn(ev) {
        ev.preventDefault();
    }
 
    function drag(ev) {
        ev.dataTransfer.setData("Text", ev.target.id);
    }
 
    function drop(ev) {
        let pattern1 = /^box/
        var data = ev.dataTransfer.getData("Text");
        console.log('ev',ev.target,ev.dataTransfer)
        if (pattern1.test(ev.target.id)) {
            ev.target.appendChild(document.getElementById(data));
            ev.preventDefault(); 
        }
    }
</script>
</html>

 

效果

 

 

 三个盒子可以任意拖拽将其中的子项进行交换

 

posted on 2022-01-07 11:12  还是种田踏实  阅读(217)  评论(0)    收藏  举报