托拽API之蓝胖子

2017-01-29 本文已影响0人旧丶时候

0. 前言

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

timg.jpg

1. 简介

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

2. 相关重点

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

3. 代码实现

3.1 静态效果

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>拖拽</title>
        <style type="text/css">
            div{
                width: 300px;
                height: 300px;
                float: left;
                border: 1px dashed red;
            }
        </style>
    </head>
    <body>
        <div id="box1">
            <!-- draggable默认是true，默认是可以被拖拽的，
                如果我们像要实现拖拽，最好手动设置为true
            -->
            <img src="../img/drag.jpg" draggable="true" id="dragImg" />
        </div>
        
        <div id="box2"></div>
    </body>
</html>

图片.png

3.2 实现托拽

        <script type="text/javascript">
            var box1 = document.querySelector("#box1");
            var box2 = document.querySelector("#box2");
            var img = document.querySelector("img");
            
            /**** 拖拽元素相关事件 ****/
            img.ondragstart = function (e) {
                //设置拖拽的标识 (在其他事件对象中就会获取到存储的这个值)
                e.dataTransfer.setData("id", e.target.id);
            }
            /**** 目标元素事件相关 ****/
            box2.ondragover = function (e) {
                //这里需要阻止事件默认行为才能触发ondrop
                e.preventDefault();
            }
            box2.ondrop = function (e) {
                //获取拖拽时存储的拖拽标识
                var imgId = e.dataTransfer.getData("id");
                //获取拖拽元素，并且加入到目标元素
                this.appendChild(document.querySelector("#" + imgId));
            }
        </script>

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. 完整代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>拖拽</title>
        <style type="text/css">
            div{
                width: 300px;
                height: 300px;
                float: left;
                border: 1px dashed red;
            }
        </style>
    </head>
    <body>
        <div id="box1">
            <!-- draggable默认是true，默认是可以被拖拽的，
                如果我们像要实现拖拽，最好手动设置为true
            -->
            <img src="../img/drag.jpg" draggable="true" id="dragImg" />
        </div>
        
        <div id="box2"></div>
        
        <script type="text/javascript">
            var box1 = document.querySelector("#box1");
            var box2 = document.querySelector("#box2");
            var img = document.querySelector("img");
            
            /**** 拖拽元素相关事件 ****/
            img.ondragstart = function (e) {
                //设置拖拽的标识 (在其他事件对象中就会获取到存储的这个值)
                e.dataTransfer.setData("id", e.target.id);
            }
            box2.ondragover = function (e) {
                //这里需要阻止事件默认行为才能触发ondrop
                e.preventDefault();
            }
            box2.ondrop = function (e) {
                //获取拖拽时存储的拖拽标识
                var imgId = e.dataTransfer.getData("id");
                //获取拖拽元素，并且加入到目标元素
                this.appendChild(document.querySelector("#" + imgId));
            }
            box1.ondragover = function (e) {
                e.preventDefault();
            }
            box1.ondrop = function (e) {
                //获取拖拽时存储的拖拽标识
                var imgId = e.dataTransfer.getData("id");
                //获取拖拽元素，并且加入到目标元素
                this.appendChild(document.querySelector("#" + imgId));
            }
        </script>
    </body>
</html>

5. 结束语

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