IE中的拖放实例

来源：互联网发布：泰国best face软件编辑：程序博客网时间：2024/05/01 04:45

拖放首先是由IE4.0引入的，一开始只有IE支持此功能。但现在已经作为HTML5的标准的一部分。

有2种行为可以实现拖放：系统拖放和模拟拖放，其中以前只有IE实现了系统拖放

系统拖放的优点：可以实现浏览器和桌面、浏览器和浏览器、窗口之间、框架页之间的移动；

拖放一开始只支持图像和文本拖放，后来进行了扩展，现在几乎所有元素都可被拖放了。

（一）系统拖放

1.拖放事件

拖放事件分为2种：在被拖放项的事件和在放置目标上的事件

1）被拖放项事件

某个项被触发时的事件触发顺序：dragstart; drag; dragend

dragstart: 当按下鼠标按钮，开始移动鼠标时，开始触发此事件

drag：只要对象还在被拖得，此事件就会一直触发，类似mousemove

dragend：在拖放停止时（在有效或无效的放置对象上放下该项），则触发此事件

2）放置目标事件

当被拖放项拖到有效的放置目标上后触发顺序：dragenter; dragover; dragleave/drop

dragenter: 当被拖放项刚进入放置目标时触发，类似mouseover

dragover：当被拖放项在目标边界内将一直触发，当被拖放项被拖出目标后则停止触发

dragleave：当此目标不是被拖放项最终的放置目标，则在离开此目标时触发该事件，类似mouseout

drop: 当此目标正是被拖放项最终的放置目标，则触发此事件代替dragleave。

2种事件的触发顺序是：dragstart drag .... dragenter dragover..... drop dragleave dragend

注意：

所有的元素上都能绑定放置目标的事件，但并不保证此元素是有效的放置对象。

默认情况下，IE中只有文本框（<input/>或<textarea/>）是网页上唯一有效的放置目标。若想让其他元素变成有效的放置目标，则需要阻止dragenter和dragover事件的默认行为，因为这些只适用于IE。方法是在dragenter和dragover的事件处理函数中将event.returnValue设置为false（适用于IE事件）.或调用event.preventDefault方法（适用于标准事件）。

2、dataTransfer数据传输对象

仅仅拖放是没有用的，除非数据通过拖放传递，这就需要dataTransfer对象了。

此对象是event的专属特性，只在事件处理函数中存在。调用方法是event.dataTransfer

2.1 方法setData（）、getData（）

一个用来设置数据，一个用来获取数据。

setData只能设置两种类型的值：text和URL。如果是文本选用text类型，如果是链接，选用URL类型

注意只有2个空间可以存储这2种类型的值，一个是放text的空间，一个是放URL的空间。每个空间只能放1一个值，所以如果重复调用setData()，会覆盖空间内已经存储的值。

存储在dataTransfer对象中的数据在drop事件发生前才有用，即如果在drop事件处理函数中没有去获取其中的数据，那么dataTransfer就会被销毁，数据就会丢失。

2.2 属性dropEffect和effectAllowed

dataTransfer对象不进可以用来传输数据，还能对被拖动的物体和放置目标定义动作。

dropEffect

作用于被放置目标的dragenter事件，用来设置放置目标上允许那种类型的放置行为，有4种取值：

“none”：被拖放项不能放在此目标上，除文本框（<input/>或<textarea/>）外所有其他对象的默认值；
“move”：表示被拖放的项要移动到该放置目标内；
“copy”：表示被拖放的项要复制到放置目标内；
“link”：表示被拖动的项（是URL类型的才有效）会在放置对象上打开浏览。

effectAllowed

作用于被拖动项的dragstart事件，设置被拖动项允许哪种类型的dropEffect。如果此属性没有设置，则dropEffect将不会起作用。

可能取值：

"none":拖动项上不允许任何动作
"copy":只允许“copy”的dropEffect
"link":只允许“link”的dropEffect
"move":只允许“move”的dropEffect
"copyLink": 只允许“copy”和“link”的dropEffect
"copyMove":只允许“copy”和“move”的dropEffect
"linkMove":只允许“link”和“move”的dropEffect
"all":允许所有类型的dropEffect。

示例代码：可能有错，但可以帮助理解

<!DOCTYPE HTML><html><head>    <meta charset="utf-8"><script type="text/javascript">    function handleDragDropEvent(event){        var text=document.getElementById("txt1");        text.value += event.type+"\n";        switch (event.type){            case "dragstart":                event.dataTransfer.effectAllowed = "move";                event.dataTransfer.setData("text","hello");                break;            case "dragover":                event.returnValue = false;                break;            case "dragenter":                event.dataTransfer.dropEffect = "move";                event.returnValue=false;                break;            case "drop":                event.returnValue = false;                (event.srcElement?event.srcElement:event.target).innerHTML=                        event.dataTransfer.getData("text");        }    }</script></head><body><form>    <p>        <img src="image/writer3.png" alt="image" width="100" height="100"ondragstart="handleDragDropEvent(event)" ondrag="handleDragDropEvent(event)" ondragend="handleDragDropEvent(event)" />    </p>    <div style="width: 200px;height: 200px;border: 1px solid #ff0000" ondragenter="handleDragDropEvent(event)" ondragover="handleDragDropEvent(event)" ondragleave="handleDragDropEvent(event)" ondrop="handleDragDropEvent(event)"></div>    <p>            <!--此文本框用来观察事件触发顺序-->        <textarea cols="25" rows="10" id="txt1" readonly="readonly"></textarea>    </p></form></body></html>

（二）模拟拖放

显然IE中系统拖放很强大，但要想开发在多个浏览器之间运行的拖放程序，系统拖放行不通，因为只有IE支持这个功能，其他浏览器没有开发这个功能。（当然HTML5之后就有所改变了）。那在其他不支持系统拖放的浏览器上就要靠模拟拖放来实现了。

模拟拖放的思想：创建可以跟着鼠标移动的绝对定位层，让用户感觉像是使用拖放。

将被拖放项和放置目标都设置为absolute定位，首先在被拖放项上注册mousedown事件，然后当鼠标在被拖放项上按下时，mousedown事件处理函数在body上注册mousemove和mouseup事件，最后当鼠标被松开时，即mouseup事件发生时，若被拖动项在放置目标边界内，则将被拖放项定位到放置目标上，同时删除body上的mousemove和mouseup事件。

其中要用到鼠标窗口坐标：event.clientX/event.clientY；被拖放项的offsetLeft和offsetTop；放置目标的offsetHeight和offsetWidth。

直接贴源代码了：检测运行正常

<!DOCTYPE html><html><head>    <title>drag event</title>    <style type="text/css">        body{            width: 100%;            height: 800px;        }        #div1{            background-color: #ff0000;            height: 100px;            width: 100px;            position: absolute;/*被拖动项要为绝对定位*/        }        #target{            width: 500px ;            height: 500px;            border: 1px solid #ff0000;            position: absolute;/*放置对象也要为决对定位*/            left: 500px;        }    </style>    <script type="text/javascript">        //定义可以拖放的对象        var diffX=0;        var diffY=0;        var oDiv;        var target;        window.onload=function(){         oDiv= document.getElementById('div1');//被拖动项         target=document.getElementById("target");//放置目标        }        function handleMouseMove(e){            oDiv.style.left=(e.clientX-diffX)+"px";            oDiv.style.top = (e.clientY-diffY)+"px";        }        function handleMouseDown(e){            diffX=e.clientX - oDiv.offsetLeft;            diffY=e.clientY - oDiv.offsetTop;            if(document.body.attachEvent){                document.body.attachEvent("onmousemove",handleMouseMove)                document.body.attachEvent("onmouseup",handleMouseUp);            }            else {                document.body.addEventListener("mousemove",handleMouseMove,false);                document.body.addEventListener("mouseup",handleMouseUp,false);            }        }        function handleMouseUp(e){            if(document.body.detachEvent){                document.body.detachEvent("onmousemove",handleMouseMove);                document.body.detachEvent("onmouseup",handleMouseUp);            }else{                document.body.removeEventListener("mousemove",handleMouseMove,false);                document.body.removeEventListener("mouseup",handleMouseUp,false);            }            if(isOverDropTarget(e.clientX,e.clientY)){                oDiv.style.left=target.offsetLeft+"px";                oDiv.style.top=target.offsetTop+"px";            }        }        //定义放置目标，先判断鼠标的坐标是否位于放置目标内        function isOverDropTarget(x,y){           var x1 = target.offsetLeft;           var x2 = x1+target.offsetWidth;            var y1 = target.offsetTop;            var y2 = y1+target.offsetHeight;            var isDragOver=x>=x1&&x<=x2&&y>=y1&&y<=y2;            return(isDragOver);        }    </script></head><body><p>try mocing your mouse</p><div id="div1" onmousedown="handleMouseDown(event);"></div><div id="target"></div></body></html>

0 0