IE中的拖放实例

最新推荐文章于 2020-07-08 20:33:47 发布

奋斗中的小黄鸡

最新推荐文章于 2020-07-08 20:33:47 发布

阅读量2.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： JAVASCRIPT HTML5 文章标签：拖放 drag事件系统拖放模拟拖放

本文链接：https://blog.youkuaiyun.com/ruoyiqing/article/details/39252269

JAVASCRIPT 同时被 2 个专栏收录

7 篇文章

订阅专栏

HTML5

6 篇文章

订阅专栏

本文详细介绍了IE中的拖放功能，包括系统拖放和模拟拖放。系统拖放部分涉及拖放事件，如被拖放项和放置目标事件，以及dataTransfer对象的使用，如setData()和getData()方法，以及dropEffect和effectAllowed属性的设置。模拟拖放部分则讨论了如何在没有系统支持的情况下实现拖放功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

拖放首先是由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>