拖动画板----jQuery

最新推荐文章于 2024-11-22 10:26:15 发布

gallos

最新推荐文章于 2024-11-22 10:26:15 发布

阅读量286

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_40760617/article/details/82961513

本文详细介绍了一种基于HTML、CSS和JavaScript实现的可拖动画板，利用jQuery库简化DOM操作，通过鼠标事件实现画板的拖动功能。

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

编写一个具有标题和内容的画板。

<div style="position: absolute; width: 600px; border: 1px solid red">
        <div id="title" class="top" style="background-color: #1f2222; height: 40px;color:             
        whitesmoke;">标题</div>
        <div style="height: 300px">内容</div>
</div>

接下来是js部分：

首先引进jQuery：

<script src="http_code.jquery.com_jquery-3.3.1.js"></script>

接下来将是如何实现画板的拖动：

<script>
    //改变鼠标的样式
    $("#title").mouseover(function(){
        $(this).css("cursor","move");
    });
    //绑定事件
    $("#title").mousedown(function(event){
    //你要写的代码
    });
</script>

可以将改变鼠标样式和绑定鼠标事件合并在一块

$("#title").mouseover(function () {
           $(this).css("cursor","move")
        }).mousedown(function (event) {
//你要写的代码
});

接下来获取标题的坐标和鼠标的偏移量

 //获取鼠标坐标
            var start_x = event.screenX;
            var start_y = event.screenY;
//offset获取当前元素（title）的偏移量
            var parent_left = $(this).parent().offset().left;
            var parent_top = $(this).parent().offset().top;

接下来进行时间的绑定

//时间的绑定on
$(this).on("mousemove",function(e)){
    //获取鼠标移动互的新的坐标
    var new_x = e.screenX;
    var new_y = e.screenY;
    
    var new_parent_x = parent_left + (new_x-start_x);
    var new_parent_y = parent_top + (new_y-start_y);

    $(this).parent.css("left",new_parent_x + "px");
    $(this).parent.css("top",new_parent_y + "px");
}

绑定后画板将可以进行拖动，但是将松开按钮时画板继续跟着鼠标进行移动

所以用$（this).mouseup()隐藏mousemove的属性

$(this).mouseup(function(){
   //off()方法通常用于移除通过on（）方法添加的事件
     $(this).off("mousemove");
});

over！！！