HTML5--拖放事件与dataTransfer对象

最新推荐文章于 2024-03-27 09:10:27 发布

青阳zi

最新推荐文章于 2024-03-27 09:10:27 发布

阅读量1.8k

点赞数 4

分类专栏： JS 文章标签： html5 html

本文链接：https://blog.csdn.net/qq_34093387/article/details/120866864

版权

JS 专栏收录该内容

39 篇文章 8 订阅

订阅专栏

若不使用HTML5的拖放事件，我们仍可以通过mousedown、mousemove、mouseup这三个事件来实现页面元素被鼠标拖拽的效果。

然而这样实现的拖拽仅仅是交互上的，即只是显示上的变化，并没有什么实质性的功能。而HTML5中直接提供了拖放的API，只要通过监听元素的拖放事件就能实现各种拖放功能。

若要拖放某个元素，则必须将其的draggable属性设置为true。img和a元素默认为true。

拖放事件
拖放的过程中被拖放的对象被称为源对象，过拖放过程中间经过的其他对象被称为过程对象，最终到达的对象称作目标对象。

拖放事件可以用这三种对象来分类，不同的事件会被哪一种对象触发。

源对象：
dragstart：源对象开始拖放，开始移动时事件触发
drag：源对象拖放过程中，移动被拖拽对象时触发
dragend：源对象拖放结束，整个拖放操作结束时触发。
过程对象：
dragenter：源对象进入过程对象范围内，被拖拽对象进入过程对象时被触发
dragover：源对象在过程对象范围内移动，被拖拽对象在过程对象内移动时触发
dragleave：源对象离开过程对象的范围，被拖拽对象离开目标对象时触发
目标对象：
drop：源对象拖放到目标对象中，目标对象完全接受被拖拽对象时触发，可理解为在目标对象内松手时触发。
dataTransfer对象
在所有的拖放事件中都提供了一个数据传输对象dataTransfer，主要是用于在源对象和目标对象之间传递数据。

方法
setData(format, data)
设置拖拽事件中要传递的数据，format的参数为数据类型
该方法向dataTransfer中对象中存入数据，接受两个参数，第一个表示要存入的数据类型，共有4种：
text/plain
text/html
text/xml
text/uri-list
第二个参数为要存入的数据，例如：event.dataTransfer.setData('text/plain', 'hello world')
注：如果给定类型的数据不存在，则将其添加到拖动数据存储的末尾，使得dataTransfer.types列表中的最后一个项目将是新类型。

getData(format)

获得拖拽事件中传递的数据，format参数为数据类型
该方法从dataTransfer对象中读取数据，参数为在setData方法中指定的数据类型，例如：event.dataTransfer.getData('text/plain')
clearData()

该方法清空dataTransfer对象中存储的数据，参数可选，为数据类型。若为空，则清空所有数据。
setDragImage(element,x,y)

该方法通过img元素来设置拖放图标
element表示拖拽时鼠标下面的图片（通常是image元素，也可以说canvas元素）
x、y分别指示相对于图片的横向和纵向偏移量，相对应鼠标指针。
files属性

返回被拖拽的文件列表，是一个FileList对象，有length属性，可通过下标访问。
案例：

每个li既是可拖动，同时也是容器，拖动到li上面时移动拖动的li。
先把html写好

<ul>
        <li class="ele" draggable="true">1</li>
        <li class="ele" draggable="true">2</li>
        <li class="ele" draggable="true">3</li>
        <li class="ele" draggable="true">4</li>
        <li class="ele" draggable="true">5</li>
        <li class="ele" draggable="true">6</li>
        <li class="ele" draggable="true">7</li>
        <li class="ele" draggable="true">8</li>
    </ul>

ul {
        list-style: none;
        margin: 200px;
        font-size: 0;
    }
    .ele {
        font-size: 16px;
        width: 100px;
        height: 40px;
        border: 1px solid #999;
        background: #EA6E59;
        margin: 2px 0;
        border-radius: 10px;
        padding-left: 10px;
        color: white;
        cursor: move;
    }

下面添加事件，由于拖动是实时的，所以没有使用drop而是使用了dragover。并且用一个变量来保存当前拖动的元素。这里直接使用事件委托，直接使用ul来监听

var node = document.querySelector("#container");
var draging = null;
//使用事件委托，将li的事件委托给ul
node.ondragstart = function(event) {
    /firefox设置了setData后元素才能拖动！！！！
        event.dataTransfer.setData("te", event.target.innerText); //不能使用text，firefox会打开新tab
        draging = event.target;
    }
node.ondragover = function(event) {
        event.preventDefault();
        var target = event.target;
    //因为dragover会发生在ul上，所以要判断是不是li
        if (target.nodeName === "LI"&&target !== draging) {
                //_index是实现的获取index              
                if (_index(draging) < _index(target)) {
                    target.parentNode.insertBefore(draging, target.nextSibling);
                } else {
                    target.parentNode.insertBefore(draging, target);
                }
        }
    }

接下来就是移动正在拖动的li了，当前li的index大于容器li时就插入在容器的前面，反之插入在容器的后面，那么怎么获取当前li的index呢？Node有一个属性previousElementSibling，表示该元素前面的一个元素，那么我们可以这样好的，基本的排序就做好了

function _index(el) {
        var index = 0;
        if (!el || !el.parentNode) {
            return -1;
        }
        while (el && (el = el.previousElementSibling)) {
            index++;
        }
        return index;
    }

好的，基本的排序就做好了

动画

好了，先讲思路，动画其实不需要给所有元素都添加，只需要给移动的元素和目标元素添加动画就够了，例如我们交换了1和2的位置，那么就给1和2添加动画。这种添加动画的思路是通用的，比如可以做元素的页面进入动画。

我们可以记录1和2交换之前的位置，然后获取交换之后的位置，然后让元素从原位置慢慢移动到目标位置。
图片表示

那么我们先获取初始位置，肯定是在移动元素之前进行获取，那么我们在dragover移动元素之前加上

var targetRect = target.getBoundingClientRect();
var dragingRect = draging.getBoundingClientRect();

然后在交换位置之后再次获取元素位置

var targetAfter = target.getBoundingClientRect();
var dragingAfter = draging.getBoundingClientRect();

位置还原

先获取两者的差，然后就可以为其添加transform，由于我们需要将元素瞬间移动到原来的位置，所以我们需要将其transition设为none

target.style.transition='none';
target.style.transform='translate3d(' +
                (targetRect.left - targetAfter.left) + 'px,' +
                (targetRect.top - targetAfter.top) + 'px,0)'

//draging同理

然后就可以再设置transform进行移动，这里如果直接设置的话，当然动画是无法显示的，原因可以看这里

target.offsetWidth; //触发重绘
target.style.transition='all 300ms';
target.style.transform='translate3d(0,0,0)';

还有一个问题

由于我们的动画是添加在dragover里面，然而dragover是会不停的触发，加过就是元素不停“抽搐”，所以我们需要判断元素是否已经添加了动画。这个的话方法就很多了，这里我是设置了一个定时器，事件到了之后将transition和transform清空，设置动画之前进行判断定时器是否已经存在

clearTimeout(target.animated);
target.animated = setTimeout(function() {
target.style.transition='';
target.style.transform='';
target.animated = false;
//draging同理
}, ms);

完整代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			ul {
			        list-style: none;
			        margin: 200px;
			    }
			
			    .ele {
			        width: 100%;
			        height: 40px;
			        border: 1px solid #999;
			        background: #EA6E59;
			        margin-top: 2px;
			        border-radius: 10px;
			        padding-left: 10px;
			        color: white;
			        cursor: move;
			    }
		</style>
	</head>
	<body>
		<ul id="container">
		        <li class="ele" draggable="true">1</li>
		        <li class="ele" draggable="true">2</li>
		        <li class="ele" draggable="true">3</li>
		        <li class="ele" draggable="true">4</li>
		</ul>
		<script>
			var node = document.querySelector("#container");
			var draging = null;
			//使用事件委托，将li的事件委托给ul
			node.ondragstart = function(event) {
			        //console.log("start");
			  			//firefox设置了setData后元素才能拖动！！！！
			        event.dataTransfer.setData("te", event.target.innerText); //不能使用text，firefox会打开新tab
			        //event.dataTransfer.setData("self", event.target);
			        draging = event.target;
			    }
			node.ondragover = function(event) {
			        //console.log("onDrop over");
			        event.preventDefault();
			        var target = event.target;
			  			//因为dragover会发生在ul上，所以要判断是不是li
			        if (target.nodeName === "LI") {
			            if (target !== draging) {
			                var targetRect = target.getBoundingClientRect();
			                var dragingRect = draging.getBoundingClientRect();
			                if (target) {
			                    if (target.animated) {
			                        return;
			                    }
			                }
			                if (_index(draging) < _index(target)) {
			                    target.parentNode.insertBefore(draging, target.nextSibling);
			                } else {
			                    target.parentNode.insertBefore(draging, target);
			                }
			                _animate(dragingRect, draging);
			                _animate(targetRect, target);
			            }
			        }
			    }
				//获取元素在父元素中的index
			  function _index(el) {
			        var index = 0;
			
			        if (!el || !el.parentNode) {
			            return -1;
			        }
			
			        while (el && (el = el.previousElementSibling)) {
			            //console.log(el);
			            index++;
			        }
			
			        return index;
			    }
			
			function _animate(prevRect, target) {
			        var ms = 300;
			
			        if (ms) {
			            var currentRect = target.getBoundingClientRect();
			
			            if (prevRect.nodeType === 1) {
			                prevRect = prevRect.getBoundingClientRect();
			            }
			
			            _css(target, 'transition', 'none');
			            _css(target, 'transform', 'translate3d(' +
			                (prevRect.left - currentRect.left) + 'px,' +
			                (prevRect.top - currentRect.top) + 'px,0)'
			            );
			
			            target.offsetWidth; // 触发重绘
			            //放在timeout里面也可以
			            // setTimeout(function() {
			            //     _css(target, 'transition', 'all ' + ms + 'ms');
			            //     _css(target, 'transform', 'translate3d(0,0,0)');
			            // }, 0);
			            _css(target, 'transition', 'all ' + ms + 'ms');
			            _css(target, 'transform', 'translate3d(0,0,0)');
			
			            clearTimeout(target.animated);
			            target.animated = setTimeout(function() {
			                _css(target, 'transition', '');
			                _css(target, 'transform', '');
			                target.animated = false;
			            }, ms);
			        }
			    }
				//给元素添加style
			  function _css(el, prop, val) {
			        var style = el && el.style;
			
			        if (style) {
			            if (val === void 0) {
			                if (document.defaultView && document.defaultView.getComputedStyle) {
			                    val = document.defaultView.getComputedStyle(el, '');
			                } else if (el.currentStyle) {
			                    val = el.currentStyle;
			                }
			
			                return prop === void 0 ? val : val[prop];
			            } else {
			                if (!(prop in style)) {
			                    prop = '-webkit-' + prop;
			                }
			
			                style[prop] = val + (typeof val === 'string' ? '' : 'px');
			            }
			        }
			    }
		</script>
	</body>
</html>