HTML5 JS实现拖拽功能-优快云博客

本文链接：https://blog.youkuaiyun.com/ruler1112/article/details/77604578

该博客介绍了如何使用JavaScript和HTML5实现拖拽功能，包括拖放事件、数据传递和拖放效果的处理。通过示例代码展示了如何在拖动元素时设置拖动图像、传递数据，并在目标元素上执行drop操作。

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

/**
 * 拖放事件
 * (默认图像,链接,文本是可以拖动的)
 * (别的元素要拖动首先设置draggable="true":对于draggable的支持ie10+,ie9-只能使用默认拖动)
 *  1. 被拖放元素拖放事件:
 *      a.dragstart:被拖放的元素开始拖放的时候触发
 *      b.drag:在拖放过程中持续触犯
 *      c.dragend:停止投放的时候触发
 *  2. 被放置元素拖放事件:
 *      a.dragenter:有投放元素进入的时候触发
 *      b.dragover:拖放元素子里面移动的时候连续触发
 *      c.dragleave:拖放元素出去的时候触发
 *      d.drop:拖放元素在里面放置的时候触发
 *
 *  3. 拖放中的数据传递
 *      a.在拖放数据的时候使用dataTransfer来存储和获取数据
 *      b.存储数据:ev.dataTransfer.setData("类型","值") 类型通用有两种:"text/plain"和"text/url-list"(ie中使用"text"和"url")
 *      c.获取数据:ev.dataTransfer.getData("类型")类型同上
 *      (获取数据是在目标对象的drop事件上获取在别的事件上都取不到)
 *      (注意设置document的dragover和dragend为return false否则获取不到数据)
 *      (目标有几层元素就会触发几次)
 *  4. dropEffect和effectAllowed(这是dataTransfer的两个属性)
 *      每一个属性试过过后发现:
 *      对于拖动元素而言在dragstart时设置effectAllowed不为none光标显示为指针而不是禁止标志
 *      (除了光标改变我没发现别的什么效果)
 *      (如有人发现不同效用不吝指教)
 *
 *  5.dataTransfer属性:
 *      a. clearData(format):清除特定格式的数据
 *      b. setDragImg(elem,x,y):设置拖动的时候光标下面显示的图像,(x,y为光标在图像上的位置)
 *      (这个方法还是很好用的,但是不支持ie)
 *	
 */

下面是从网上拉下来的一个测试示例

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script type="text/javascript">
        function init() {
            var source = document.getElementById("dragme");
            var dest = document.getElementById("text");
            var oImg=document.getElementsByTagName("img")[0];
            oImg.ondragstart=function(e){
                e.preventDefault();
            };
            source.addEventListener("dragstart", function (e) {
                var dt = e.dataTransfer;
                dt.effectAllowed = 'copy';
                dt.setDragImage(oImg,25,25);
                dt.setData("text/plain", "你好");
            }, false);
            dest.addEventListener("dragend", function (e) {
                e.preventDefault();
            }, false);
            dest.addEventListener("drop", function (e) {
                var dt = e.dataTransfer;
                var text = dt.getData("text/plain");
                dt.dropEffect = 'none'; //其实没什么卵用(即使设置为link,a元素拉进来也不会打开链接)
                dest.textContent += text;
                e.preventDefault();
                e.stopPropagation;
            }, false);
        }
        document.ondragover = function (e) { //必须的
            e.preventDefault();
        };
        document.ondrop = function (e) {     //必须的
            e.preventDefault();
        };

    </script>
</head>
<body onload="init()">
<img src="../images/sky02.jpg" width="50" height="50">
<a id="dragme" href="http://www.baidu.com">请拖放</a>
<div id="text" style="width:200px;height:200px;border:1px solid;border-color:gray"></div>
</body>
</html>