利用onmousedown和dragstart分别实现网页拖拽效果

平常我们写网页拖拽的时候，一般都是通过mousedown+mousemove+mouseup这种方式来模拟出拖拽的效果的，今天看书的时候，偶然看到原来浏览器早就支持了原生的拖拽事件，那就是dragstart+drag+dragend这一套东西。

不难理解，看字面意思就知道这是开始拖拽+拖拽+完成拖拽分别触发的事件。

用这种原生的拖拽方式未必会比监听鼠标的方式好（特别是扩展性不够强），但至少我感觉相同的一段拖拽效果，用dragstart方式会要少写一些代码（省了碰撞检测不是）。

我们来先上一段代码，是监听鼠标事件模拟出的网页拖拽效果。当然你与我的方式未必相同，但想来应该大同小异。

Javascript

window.onload =function(){

            var oBody = document.body;
            var oShow = document.getElementById('show');
            var aImg = document.getElementById('menu').getElementsByTagName('img');
            var moveable = false;

            for (var i=0; i<aImg.length; i++) {
                
                aImg[i].onmousedown = function(ev){
                    var ev = ev || window.event;
                    var This = this;

                    //alert(document.documentElement.scrollTop)

                    var clonImg = document.createElement('img');
                    clonImg.id = 'clonimg';
                    clonImg.src= This.getAttribute('src');
                    clonImg.style.position = 'absolute';
                    clonImg.style.left = ev.clientX +'px';
                    clonImg.style.top = ev.clientY +'px';
                    clonImg.style.width = 150+'px';
                    clonImg.style.opacity = 0.5;
                    clonImg.style.filter = 'alpha(opacity=50)';

                    oBody.appendChild(clonImg);

                    //这是解决ie7下的一个兼容bug--来自妙味
                    if(This.setCapture){
                        This.setCapture();
                    }
                    
                    document.onmousemove = function(ev){
                        var ev = ev || window.event;
                        clonImg.style.left = ev.clientX+ 'px';
                        clonImg.style.top = ev.clientY+ 'px';
                    };
                    
                    document.onmouseup = function(){

                        document.onmousemove = null;
                        document.onmouseup = null;
                        if(clonImg.releaseCapture){
                            clonImg.releaseCapture();
                        }
                        if(runInto(clonImg,oShow)){
                            clonImg.style.opacity = 1;
                            clonImg.style.filter = 'alpha(opacity=100)';
                        }
                        else{
                            oBody.removeChild(clonImg);
                        }
                    };
                    ev.stopPropagation();
                    return false;
                    
                };
                
            }
            
        }

        function runInto(obj1,obj2){//碰撞检测
    
            var L1 = obj1.offsetLeft;
            var T1 = obj1.offsetTop;
            var R1 = L1 + obj1.offsetWidth;
            var B1 = T1 + obj1.offsetHeight;
            
            var L2 = obj2.offsetLeft;
            var R2 = L2 + obj2.offsetWidth;
            var T2 = obj2.offsetTop;
            var B2 = T2 + obj2.offsetHeight;

            if( R1<=L2 || L1>=R2 || T1>=B2 || B1<=T2 ){
                return false;
            }
            else{
                return true;
            }
        };

通过mousedown方式实现拖拽

 

顺便附上我的网页结构和css代码还有实际效果图。

<div id="main">
        <div id="menu">
            <a href="#"><img src="images/a.jpg" alt=""></a>
            <a href="#"><img src="images/b.jpg" alt=""></a>
            <a href="#"><img src="images/c.jpg" alt=""></a>
        </div>
        <div id="show"></div>
    </div>

HTML

 

*{ padding: 0; margin: 0;}
        #main{position: relative;}
        #menu{ position: absolute; left: 30px; top: 30px;}
        #menu img{ display: block; width: 150px; margin: 0px 0 20px;}
        #show{ position: absolute; left: 400px; top: 30px; width: 800px; height: 500px; border: 1px solid #f00;}

CSS

同样的html结构，我们来看看dragstart方式实现拖拽的代码。

首先要说明的一点是浏览器本身拖拽事件是dragstart没错，但是我们接受拖拽的元素却是另一种方式。

我们在html中对于普通的元素只能拖拽并不能接收拖拽元素，大多时候默认只有input才能够接收拖拽元素，这时候我们需要做一些处理才能够让普通的元素接收拖拽元素。

我是在高程中学到的方式，看书总是能够让我们获得未知的知识。

我们只需要清除目标元素的dragenter(进入目标元素时触发)、dragover(在目标元素中移动会持续触发)、drop(拖拽完成并且拖拽元素处于目标元素中时会触发)三个事件就能够让普通的html元素变成可以接受拖拽元素的元素。

书上提到最开始是由ie4引入拖拽功能(dragstart等)，不过当时只能支持input接收拖拽元素，不过ie5以上开始支持所有元素。Firefox、chrome等也相继提供支持。所以兼容问题应该不会很大。我这边测试过ie7+能够正常拖拽无误。

拖拽之后是通过dataTransfer对象存储拖拽的对象，HTML5可以提供更加复杂对象存储，不过之前的浏览器版本可能只支持图片或者链接的URL和文字，因此我们如果要进行一些复杂对象的拖拽，可能需要在dragstart时手动进行存储，之后在手动读取。

具体的实现方式来看下我的代码。部分知识已在注释中提到，可方便大家阅读。

window.onload =function(){

            var oShow = document.getElementById("show");

            //方法取自高程第三版482-483页
            //改变普通元素为拖拽目标元素，阻止默认行为，让show变为可接受拖拽的元素
            //dragenter拖拽元素到达目标元素时触发的事件
            addEvent(oShow,"dragenter",function(event){
                eventPreventdefault(event);
            })
            //dragover拖拽元素在目标元素中移动时触发
            addEvent(oShow,"dragover",function(event){
                eventPreventdefault(event);
            })
            //鼠标松开拖拽元素并且拖拽元素处于目标元素之中，就会执行drop事件
            addEvent(oShow,"drop",function(event){
                
                //dataTransfer对象用于存储拖拽的数据(html5之前只支持url和text2种方式，因此如果要兼容的话，可以在dragstart时将复杂对象存储。)
                var dataTransfer = event.dataTransfer;
                var drawImgUrl = dataTransfer.getData("url") || dataTransfer.getData("text/uri-list");
                var clonImg = document.createElement('img');
                clonImg.src= drawImgUrl;
                clonImg.style.width = 150+'px';
                clonImg.style.position = 'absolute';
                clonImg.style.left = (event.clientX - oShow.offsetLeft) + 'px';
                clonImg.style.top = (event.clientY - oShow.offsetTop) + 'px';
                oShow.appendChild(clonImg)
                eventPreventdefault(event);
            })
        }

        //addEvent为元素添加事件
        function addEvent(obj, sEvent, fn){
            //attachEvent支持IE下添加事件,格式obj.attachEvent(event,function);event带on,如onclick
            if(obj.attachEvent){
                obj.attachEvent('on'+sEvent, fn);
            }
            else{
                //addEventListener支持Firefox、Chrome等W3C浏览器,格式addEventListener(event,obj,false),event不带on,如click,false为定值不用更改
                obj.addEventListener(sEvent, fn, false);
            }
        };

        //取消默认行为
        function eventPreventdefault(event){
            if(event && event.preventDefault){
                event.preventDefault();
            }else{
                window.event.returnValue = false;//低版本ie不支持prevendefault()只能通过returnValue取消默认行为
            }
        }

Javascript通过dragstart方式实现网页拖拽效果

 

这是通过dargstart方式实现的效果，基本相似，由于少了碰撞检测的部分，所以代码应该会相对少一些，当然如果需要进行复杂的包含检测，依然的在drop中进行检测。

两种实现方式孰优孰劣我不知道，我并不擅长性能方面的测试，但我想原生的方式应该会更加优秀一些。如果有人也有这方面的尝试，可以相互交流。