JavaScript拖放实现

你的名字 2022-05-29 14:09 252阅读 0赞

拖放概念：点击某个对象，并按住鼠标按钮不放，将鼠标移动到另一个区域，然后释放鼠标按钮将对象放在这里。

> 基本思路：  
> 创建一个绝对定位的元素，使其可以用鼠标移动。

本文通过实例代码讲解如何实现拖放功能。

### HTML代码实现 ###

在写js代码之前，我们先创建一个用于拖动的红色方块。

<!DOCTYPE html>
    <html>
        <head>
            <title></title>
            <style type="text/css"> .draggable{ position:absolute; width:200px; height:200px; background:red; } </style>
        </head>
        <body>
            <div class = "draggable"></div>
            <div id="status"></div>
        </body>
    </html>

### JavaScript代码 ###

> 注意：  
> 本文会用到上篇文章中定义的[EventUtil][]

var DragDrop = function(){ 
        var dragging = null;//拖动目标
        function handleEvent(event){ 
            //获取事件和目标
            event = EventUtil.getEvent();
            var target = EventUtil.getTarget(event);
            //事件类型选择
            switch(event.type){
                case "mousedown":
                    if(target.className.indexOf("draggable")>-1){
                        dragging = target;
                    }
                    break;
                case "mousemove":
                    if(dragging !== null){
                        //指定目标位置
                        dragging.style.left = event.clientX+"px";
                        dragging.style.top = event.clientY + "px";
                    }
                    break;
                case "mouseup":
                    dragging = null;
                    break;      
            }
        };
        //定义公共接口
        return{
            enable:function(){ 
                EventUtil.addHandler(document,"mousedown",handleEvent);
                EventUtil.addHandler(document,"mousemove",handleEvent);
                EventUtil.addHandler(document,"mouseup",handleEvent);
            },
            disable:function(){ 
                EventUtil.removeHandler(document,"mousedown",handleEvent);
                EventUtil.removeHandler(document,"mousemove",handleEvent);
                EventUtil.removeHandler(document,"mouseup",handleEvent);
            }
        }
    }();
    DragDrop.enable();

上述代码会让具有**draggable**类的元素都可以被拖动。

### 拖动功能修缮 ###

当你实现代码，拖动红色方块的时候，会发现鼠标总是和红色方块的右上角在一起的，这个体验很糟糕，下面我们将展示修缮的代码，实现鼠标点击位置和红色方块的相对位置保持不变。  
为了实现上述效果，我们需要在鼠标点击红色方块的时候，用两个值记录鼠标位置相对于红色方块的位置。  
下图可以给出如何计算的答案：

![这里写图片描述][70]

JavaScript代码如下：

var DragDrop = function(){ 
        var dragging = null;//拖动目标
        var diffX = 0;//记录水平相对距离
        var diffY = 0;//记录竖直方向相对距离
        function handleEvent(event){ 
            //获取事件和目标
            event = EventUtil.getEvent();
            var target = EventUtil.getTarget(event);
            //事件类型选择
            switch(event.type){
                case "mousedown":
                    if(target.className.indexOf("draggable")>-1){
                        dragging = target;
                        diffX = event.clientX - target.offsetLeft;
                        diffY = event.clientY - target.offsetTop;
                    }
                    break;
                case "mousemove":
                    if(dragging !== null){
                        //指定目标位置
                        dragging.style.left = (event.clientX - diffX)+"px";
                        dragging.style.top = (event.clientY - diffY) + "px";
                    }
                    break;
                case "mouseup":
                    dragging = null;
                    break;      
            }
        };
        //定义公共接口
        return{
            enable:function(){ 
                EventUtil.addHandler(document,"mousedown",handleEvent);
                EventUtil.addHandler(document,"mousemove",handleEvent);
                EventUtil.addHandler(document,"mouseup",handleEvent);
            },
            disable:function(){ 
                EventUtil.removeHandler(document,"mousedown",handleEvent);
                EventUtil.removeHandler(document,"mousemove",handleEvent);
                EventUtil.removeHandler(document,"mouseup",handleEvent);
            }
        }
    
    }();
    
    DragDrop.enable();

> 注意:  
> 如果看过我前面的[JavaScript私有变量][JavaScript]不难发现，我们上面定义的**DragDrop对象**是一个使用了模块模式的单例。

### 完善拖放功能—添加自定义事件 ###

上面修缮的代码完全实现了拖放功能，下面我们将结合[ JavaScript自定义事件][JavaScript 1]，让应用的其他部分与拖动功能进行交互，用于指示拖动开始、正在拖动、拖动结束这几个事件。

最终代码：

var DragDrop = function(){
    
        var dragdrop = new EventTarget();//定义一个特定EventTarget类型的对象
    
        //私有变量和私有函数
        var dragging = null;//拖动目标
        var diffX = 0;//记录水平相对距离
        var diffY = 0;//记录竖直方向相对距离
        function handleEvent(event){
       //
            event = EventUtil.getEvent();
            var target = EventUtil.getTarget(event);
            //事件类型选择
            switch(event.type){
                case "mousedown":
                    if(target.className.indexOf("draggable")>-1){
                        dragging = target;
                        diffX = event.clientX - target.offsetLeft;
                        diffY = event.clientY - target.offsetTop;
                        //触发自定义事件
                        dragdrop.fire({type:"dragstart",target:dragging,x:event.clientX,y:event.clientY})
                    }
                    break;
                case "mousemove":
                    if(dragging !== null){
                        //指定目标位置
                        dragging.style.left = (event.clientX - diffX)+"px";
                        dragging.style.top = (event.clientY - diffY) + "px";
                        //触发自定义事件
                        dragdrop.fire({type:"drag",target:dragging,x:event.clientX,y:event.clientY})
                    }
                    break;
                case "mouseup":
                    //触发自定义事件
                    dragdrop.fire({type:"dragend",target:dragging,x:event.clientX,y:event.clientY})
                    dragging = null;
                    break;      
            }
        };
    
    
        //添加特权方法
        dragdrop.enable = function(){
            EventUtil.addHandler(document,"mousedown",handleEvent);
            EventUtil.addHandler(document,"mousemove",handleEvent);
            EventUtil.addHandler(document,"mouseup",handleEvent);
        };
        dragdrop.disable = function(){
            EventUtil.removeHandler(document,"mousedown",handleEvent);
            EventUtil.removeHandler(document,"mousemove",handleEvent);
            EventUtil.removeHandler(document,"mouseup",handleEvent);
        };
        return dragdrop;
    
    }();
    //定义是dragstart、drag、dragend三个事件，为每个事件添加事件处理程序
    DragDrop.addHandler("dragstart",function(event){
        var status = document.getElementById("status");
        status.innerHTML = "Started draging"  +"'"+ event.target.id +"'";
    });
    DragDrop.addHandler("drag",function(event){
        var status = document.getElementById("status");
        status.innerHTML = "<br/>Dragged" +"'"+ event.target.id  +"'"+"to("+event.x+","+event.y+")";
    });
    DragDrop.addHandler("dragend",function(event){
        var status = document.getElementById("status");
        status.innerHTML = "<br/>Dropped" +"'" + event.target.id  +"'"+"to("+event.x+","+event.y+")";
    });
    DragDrop.enable();

> 提示：  
> 看过增强的模块模式的应该都知道上述**DragDrop对象**是一个使用了增强的模块模式的单例。而这个单例就是**EventTarget**类型的实例。

[EventUtil]: https://blog.csdn.net/csdnxcn/article/details/79687790
[70]: /images/20220529/d195039cfe2542b6aafd7e773c9a981b.png
[JavaScript]: https://blog.csdn.net/csdnxcn/article/details/79618855
[JavaScript 1]: https://blog.csdn.net/csdnxcn/article/details/79692750

发表评论取消回复

表情：

评论列表（有 0 条评论，252人围观）

还没有评论，来说两句吧...

相关阅读

相关使用 wxWidgets 实现拖放操作

使用 wxWidgets 实现拖放操作 wxWidgets 是一个开源的 C++ 跨平台 GUI 库，它可以支持 Windows、Linux 和 macOS 等常见操作系统。

左手的ㄟ右手/ 2024年03月24日 16:21/ 0 赞/ 47 阅读

相关 jQuery EasyUI 拖放 - 创建拖放的购物车

如果您能够通过您的 Web 应用简单地实现拖动和放置，您就会知道一些特别的东西。通过 jQuery EasyUI，我们在 Web 应用中可以简单地实现拖放功能。在本教程中，

ゝ一纸荒年。/ 2024年03月23日 15:06/ 0 赞/ 100 阅读

相关拖放

<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8

r囧r小猫/ 2023年07月14日 14:59/ 0 赞/ 25 阅读

相关拖放 API 实现拖放排序

前言 HTML5 中提供了直接拖放的 API，极大的方便我们实现拖放效果，不需要去写一大堆的 js，只需要通过监听元素的拖放事件就能实现各种拖放功能。想要拖放某个元素

以你之姓@/ 2022年06月16日 01:27/ 0 赞/ 266 阅读

相关 JavaScript拖放实现

拖放概念：点击某个对象，并按住鼠标按钮不放，将鼠标移动到另一个区域，然后释放鼠标按钮将对象放在这里。 > 基本思路： > 创建一个绝对定位的元素，使其可以用鼠标移动。

你的名字/ 2022年05月29日 14:09/ 0 赞/ 253 阅读

相关 HTML5 如何实现拖放'N'拖放

在网络开发人员需要掌握的所有技术中，看起来最容易造成混淆和潜在问题的是拖拽。这不是一项新技术，它已存在多年，但许多开发人员仍然执着于基于jQuery的旧方法，以牵连复杂（有

Myth丶恋晨/ 2022年05月20日 02:41/ 0 赞/ 281 阅读

相关 Sortable.js拖放排序JavaScript库

本文仅做翻译记录查看，GitHub原项目地址： [https://github.com/RubaXa/Sortable/][https_github.com_RubaXa_

Myth丶恋晨/ 2022年05月14日 12:54/ 0 赞/ 252 阅读

相关 h5实现拖放功能

简介（1）设置元素可拖动。把 draggable 属性设置为 true (2) 拖动什么。然后，规定当元素被拖动时，会发生什么。ondragstart 属性调用了一

刺骨的言语ヽ痛彻心扉/ 2022年02月24日 13:16/ 0 赞/ 316 阅读

相关文档拖放

拖动相应的文件放在控件中：首先设置控件的allowdrop属性为true；第一种方法：设置控件的事件： ![在这里插入图片描述][201905260954

系统管理员/ 2022年01月27日 09:37/ 0 赞/ 253 阅读

相关 javascript的拖放

资料地址： `http://www.cnblogs.com/rubylouvre/archive/2009/09/09/1563342.html http://www.

绝地灬酷狼/ 2021年11月01日 15:54/ 0 赞/ 321 阅读