jQuery实现面板拖拽

矫情吗；* 2022-01-31 07:11 347阅读 0赞

### 一.实现功能 ###

1.首先页面有一个面板或者对话框，有长和宽，可以设置为一个div。

2.当把鼠标over到div的某个位置时，鼠标的箭头图片变为一个拖拽的图片。

3.接2，按下鼠标后，随着鼠标的移动，面板跟着移动。

4.接3，鼠标up后，面板不再跟随鼠标移动。

### 二.HTML代码 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <div class="body">
            <div class="title">标题</div>
            <div class="content"></div>
        </div>
    </body>
    </html>

### 二.CSS代码 ###

.body{
        width:400px;
        height:300px;
        border:1px solid black;
        position:absolute;
    }
    .title{
        background-color:blue;
        color:white;
        height:30px;
    }

**简易的效果图**如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbmNvY280OQ_size_16_color_FFFFFF_t_70][]

### 三.JS代码 ###

一个标签可以同时监听多个事件。

<script src="jquery-3.4.1.js"></script>
        <script>
            $(".title").mouseover(function(){
    
                //鼠标over到.title位置
                $(this).css("cursor","move");
            }).mousedown(function(e){
    
                //鼠标按下
                var old_mouse = e||window.event;
                //原鼠标坐标
                var old_m_x = old_mouse.clientX;
                var old_m_y = old_mouse.clientY;
                //原div坐标
                var parent_x=$(this).parent().offset().left;
                var parent_y=$(this).parent().offset().top;
                $(this).mousemove(function(e){
            
                    //鼠标拖动时，新鼠标坐标
                    var new_mouse = e||window.event;
                    var new_m_x = new_mouse.clientX;
                    var new_m_y = new_mouse.clientY;
                    //新div坐标
                    var x = parent_x+(new_m_x - old_m_x);
                    var y = parent_y+(new_m_y - old_m_y);
                    //改变面板位置
                    $(this).parent().css("left",x+"px");
                    $(this).parent().css("top",y+"px");
    
                }).mouseup(function(){
                    //鼠标提起后，解绑鼠标移动事件
                   $(this).unbind("mousemove");
                });
    
    
    
            })
    
        </script>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbmNvY280OQ_size_16_color_FFFFFF_t_70]: /images/20220131/c7f5fcd2c6a740b9ac6a62b4988d0bfc.png

发表评论取消回复

表情：

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

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

相关阅读

相关 jQuery实现拖拽，不用jQuery UI的中文编程实现方法

这里例子可以用于Web IDE、工作流拖拽、在线界面设计，更多功能敬请各位开发分享 <!DOCTYPE html> <html> <hea

本是古典何须时尚/ 2024年01月20日 07:22/ 0 赞/ 58 阅读

相关 AngularJS实现拖拽

<!doctype html> <html ng-app="drag"> <head> <script src="http://co

淡淡的烟草味﹌/ 2023年06月15日 09:43/ 0 赞/ 38 阅读

相关使用jQuery实现div可拖拽功能

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8">

﹏ヽ暗。殇╰゛Y/ 2022年08月06日 12:16/ 0 赞/ 335 阅读

相关 jQuery拖拽移动

jquery sortable 它所有的事件回调函数都有两个参数：event和ui ui.helper - 表示sortable元素的JQuery对象，通常是当前元素的

淡淡的烟草味﹌/ 2022年08月03日 15:52/ 0 赞/ 258 阅读

相关 Jquery实现div拖拽

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR

ゞ浴缸里的玫瑰/ 2022年06月08日 06:05/ 0 赞/ 260 阅读

相关原生js/jquery 实现拖拽功能

原生JS实现 <!doctype html> <html> <head> <meta charset="utf-8">

曾经终败给现在/ 2022年05月09日 10:52/ 0 赞/ 316 阅读

相关 jQuery 拖拽

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

心已赠人/ 2022年04月14日 20:12/ 0 赞/ 356 阅读

相关 JS代码实现拖拽（拖拽三剑客）

我们要实现对一个元素的拖拽，先假设在页面中有一个div，我们对div有一个简单的css样式，并且将div绝对定位。在标题中提到了实现拖拽的“三剑客”，也就是实现拖拽的三个

客官°小女子只卖身不卖艺/ 2022年03月20日 05:12/ 0 赞/ 512 阅读

相关 jQuery实现面板拖拽

一.实现功能 1.首先页面有一个面板或者对话框，有长和宽，可以设置为一个div。 2.当把鼠标over到div的某个位置时，鼠标的箭头图片变为一个拖拽的图片。 3.接

矫情吗；*/ 2022年01月31日 07:11/ 0 赞/ 348 阅读

相关 jQuery拖拽原理实例

HTML源代码 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8">

今天药忘吃喽~/ 2021年11月19日 11:40/ 0 赞/ 369 阅读