首页 > 代码库 > IE中中的拖放实例

IE中中的拖放实例

拖放首先是由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 = http://www.mamicode.com/false;>

(二)模拟拖放

显然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" onm ousedown="handleMouseDown(event);"></div>
<div id="target"></div>
</body>
</html>




IE中中的拖放实例