托拽API之蓝胖子

0. 前言

我说的蓝胖子就是想的那个能够帮助大熊解决各种困难的“哆啦A梦”，今天就是是实现用鼠标托拽这个蓝胖子，哈哈，那就开始吧！！！

timg.jpg

1. 简介

HTML5提供专门的拖拽与拖放的API的方法。

2. 相关重点

1. DataTransfer 对象 ： 托拽对象用来传递的媒介，使用一般为Event.dataTransfer || e.dataTransfer。
2. draggable属性 ： draggable默认是true，默认是可以被托拽的，如果我们想要实现托拽，最好是手动设置为true。
3. ondragstart 事件：当拖拽元素开始被拖拽的时候触发的事件，此事件作用在被拖曳元素上
4. ondrag 事件 ： 当拖拽元素移动的时候持续触发的事件，此事件作用在被拖曳元素上
5. ondragend 事件：当拖拽完成后触发的事件，此事件作用在被拖曳元素上
6. ondragover 事件：拖拽元素在目标元素上移动的时候触发的事件，此事件作用在目标元素上
7. ondragenter 事件：当拖曳元素进入目标元素的时候触发的事件，此事件作用在目标元素上
8. ondragleave 事件 ： 当拖曳元素离开目标元素的时候触发的事件，此事件作用在目标元素上
9. ondrop 事件：被拖拽的元素在目标元素上同时鼠标放开触发的事件，此事件作用在目标元素上
10. Event.preventDefault() || e.preventDefault() 方法 ： 阻止默认事件的方法，在ondragover中一定要阻止默认事件，否则ondrop事件不会被触发。

3. 代码实现

3.1 静态效果

图片.png

3.2 实现托拽

GIF.gif

3.3 实现反托拽

那么我想把这个蓝胖子从右面拖到左面怎么弄呢？你是不是已经想到了啊？聪明！那就是把box1当做目标元素就ok了啊！！！

box1.ondragover = function (e) {
                e.preventDefault();
            }
            box1.ondrop = function (e) {
                //获取拖拽时存储的拖拽标识
                var imgId = e.dataTransfer.getData("id");
                //获取拖拽元素，并且加入到目标元素
                this.appendChild(document.querySelector("#" + imgId));
            }

GIF.gif

4. 完整代码

5. 结束语

是不是已经学会了，这回你也可以不应用jQUery啊什么的来做这个托拽的效果了，如果你没看懂也没有关系，希望我写的对你有所帮助，最后，到你们的时间了，点赞吧，分享一下吧！！！