JavaScrip拖放功能与拖放事件-原创手记-慕课网

利用mousedown、mousemove和mouseup实现拖放功能

创建一个绝对定位（position:absolute）的元素，点击（mousedown）这个元素，并按住鼠标按钮不放，将鼠标移动（mousemove）到另一个区域，然后释放（mouseup）鼠标按钮。

代码如下：

HTML代码

 <div class='draggable'>    
 </div>

CSS代码

.draggable{
    width:50px;
    height:50px;
    background:red;
    position:absolute;
}

JavaScript代码

var EventUtil={
    getEvent:function(event){ 
        return event?event:window.event;
    },
    getTarget:function(event){
        return event.target||event.srcElement;
    },
    addHandler: function(element, type, handler) {
        if (element.addEventListener) {
            element.addEventListener(type, handler, false);
        } else if (element.attachEvent) {
            element.attachEvent('on' + type, handler);
        } else {
            element['on' + type] = handler;
        }
    }
}

var DragDrop = function() {
    var dragging = null;
    var diffX = 0;
    var diffY = 0;

    function handleEvent(event) {
        event = EventUtil.getEvent(event);
        var target = EventUtil.getTarget(event);

        switch (event.type) {
            case "mousedown":   
                if (target.className.indexOf("draggable") > -1) {
                    dragging = target;
                    diffX = event.clientX - target.offsetLeft;
                    diffY = event.clientY - target.offsetTop;       
                }
                break;
            case "mousemove":
                if (dragging !== null) {
                    dragging.style.left = (event.clientX - diffX) + "px";
                    dragging.style.top = (event.clientY - diffY) + "px";
                }
                break;
            case "mouseup":
                if (target.className.indexOf("draggable") > -1) {
                    dragging = null;
                }
                break;
        }
    }
    return{
           enable :function() {
                EventUtil.addHandler(document, "mousedown", handleEvent);
                EventUtil.addHandler(document, "mousemove", handleEvent);
                EventUtil.addHandler(document, "mouseup", handleEvent);
            },
           disable:function() {
                EventUtil.removeHandler(document, "mousedown", handleEvent);
                EventUtil.removeHandler(document, "mousemove", handleEvent);
                EventUtil.removeHandler(document, "mouseup", handleEvent);
            }
     }
}()

调用方法

DragDrop.enable()

*元素Div中的 class='draggable' 这个属性设置很重要，首先在CSS代码中需要设置绝对定位（position:absolute），其次在JavaScript代码中通过（target.className.indexOf("draggable") > -1）语句来判断当前拖放的元素。

HTML5拖放事件

1、拖动某个元素时，将依次触发下列事件

dragstart:按下鼠标并开始移动鼠标时，会在被拖动的元素上触发
drag:元素在被拖动期间持续触发
dragend:用户结束元素拖动后触发

注意

①默认情况下，文本在选中的情况下可以被拖动，而图像和链接在任何时候都可以被拖动。如果想让其他元素都可以被拖动，可以把元素的draggable属性设置为true。图像和链接的draggable属性值默认为true，其他元素的draggable属性值默认为false。
②和上述使用mousedown、mousemove和mouseup封装的拖放功能的不同之处是：目标元素在被拖动的情况下，大多数浏览器会为正被拖动的元素创建一个半透明的副本，这个副本始终跟随着光标移动。

测试代码：

<div id='box' draggable='true' style='width:50px;height:50px;background:red'>   
</div>
<span></span>

var box=document.getElementById("box")
var span=document.getElementsByTagName("span")[0]
box.addEventListener("dragstart", function(event) {
    span.innerHTML ='start!'
})
box.addEventListener("drag", function(event) {
    span.innerHTML ='move!'
})
box.addEventListener("dragend", function(event) {
    span.innerHTML ='end!'
})
//输出：start!/move!/end!

2、当某个元素被拖动到一个有效放置目标上时，在这个放置目标上会依次触发下列事件

dragenter:元素被拖动到放置目标上，就会触发
dragover:被拖动的元素在放置目标的范围内移动时持续触发
dragleave:元素被拖出了放置目标时触发（没有释放鼠标按钮）
drop：元素被放到了放置目标时触发（释放鼠标按钮）

注意

① 如果被拖动的元素经过某些无效放置目标时，就不会触发drop事件，但可以通过阻止放置目标元素的dragenter和dragover事件的默认行为，让任何元素都变成有效的放置目标。
② 在Firefox3.5+中，drop事件的默认行为是打开被放到放置目标上的URL（例如图像被拖放到放置目标上时，页面就会转向图像文件），所以需要阻止drop事件的默认行为。
③ 为了在拖放操作时实现数据交换，可以在拖放事件的事件处理程序中访问dataTransfer对象。dataTransfer对象有两个方法：setData()和getData()。
setData()方法：设置拖放操作时指定的数据类型（“Text”或“URL”）和数据内容。
getData()方法：取得由setData()保存的值，参数为字符串“text”或“URL”，表示数据类型，且只能在drop事件处理程序中读取。为了更好地在跨浏览器的情况下从dataTransfer对象中取得数据，建议在取得文本数据时使用“Text”，
在取得URL数据时进行如下检测：
var
url=dataTransfer.getData('url')||dataTransfer.getData('text/uri-list')。

测试代码：

<div id='docker' style='width:80px;height:80px;border:1px solid #000;'>
</div>
<div id='box' draggable='true' style='width:50px;height:50px;background:red'>
</div>
<span></span>

var docker=document.getElementById("docker")
var box=document.getElementById("box")
var span=document.getElementsByTagName("span")[0]
box.addEventListener("dragstart", function(event) {
    event.dataTransfer.setData("Text",event.target.id);
    span.innerHTML ='start!'
})

docker.addEventListener("dragenter", function(event) {
    event.preventDefault();
    event.target.style.borderColor='red';

})
docker.addEventListener("dragover", function(event) {
    event.preventDefault();
    span.style.color='red';
})
docker.addEventListener("dragleave", function(event) {
    event.preventDefault();
    event.target.style.borderColor='#000';
    span.style.color='#000';
})
docker.addEventListener("drop", function(event) {
    event.preventDefault();
    var id=event.dataTransfer.getData("Text");
    event.target.appendChild(document.getElementById(id));
    span.innerHTML ='OK!'
})

利用事件委托技术，给document对象添加事件处理程序，完成一个拖放事件的综合实例

例子：

HTML代码

<div class="docker">
    <div id="dragBox" draggable='true'>
        Text
    </div>
</div>
<div class="docker"></div>
<div class="docker"></div>
<div class="docker"></div>

CSS代码

#dragBox {
    width: 200px;
    height: 20px;
    text-align: center;
    background: white;
}

.docker {
    width: 200px;
    height: 20px;
    background: #ddd;
    margin-bottom: 10px;
    padding: 10px;
}

JavaScript代码

document.addEventListener("dragstart", function( event ) {
    event.dataTransfer.setData("Text",event.target.id);
    event.target.style.opacity =0.5;
});

document.addEventListener("dragend", function( event ) {
    event.target.style.opacity = "";
});

document.addEventListener("dragover", function( event ) {
    event.preventDefault();
});

document.addEventListener("dragenter", function( event ) {
    event.preventDefault();
    if ( event.target.className == "docker" ) {
        event.target.style.background = "#ccc";
    }
});

document.addEventListener("dragleave", function( event ) {
    if ( event.target.className == "docker" ) {
        event.target.style.background = "";
    }
});

document.addEventListener("drop", function( event ) {
    event.preventDefault();
    if ( event.target.className == "docker" ) {
        var id=event.dataTransfer.getData("Text");
        event.target.appendChild(document.getElementById(id));
        event.target.style.background = "";
    }
});

文中的代码部分，带有“例子”和“测试代码”字样的，只是用来学习或测试某一功能用的代码，不可以直接用于项目的开发中。带有“代码如下”字样的，都是经过本人测试，简单修改即可用于项目开发中的代码，如有错误，欢迎指出。