JQuery实现元素拖拽功能（未来元素，可输入框修改）

最新推荐文章于 2024-07-30 13:59:51 发布

_一个世纪

最新推荐文章于 2024-07-30 13:59:51 发布

阅读量4.7k

点赞数 5

文章标签： javascript 元素拖拽未来元素 jquery

本文链接：https://blog.csdn.net/qq_36288025/article/details/80901548

版权

本文介绍了如何使用JQuery实现元素拖拽功能，包括对未来元素的绑定，以及通过<input>标签修改div的属性。通过监听鼠标事件，动态计算并更新元素位置，同时确保元素在拖动时不会超出边界。此外，还提供了在拖动过程中实时更新输入框显示值的方法。

摘要由CSDN通过智能技术生成

昨天经理下班前要求我实现拖拽布局，那最基本的就要用JS来实现一个元素的拖拽效果，并且可以通过<input>标签来定义各种属性。设计思路，首先要实现元素的拖拽。

一、定义一个HTML

因为需要绑定未来元素，所以把DIV放到了一个共有的DIV中。

    <div class="vb-move-container">
        <div class="vb-container vb-can-do" style="top:10px">
            <div class="vb-demo" style="background: #f60;"></div>
            <div class="vb-option">
                X轴<input type="text" class="vb-x">
                y轴<input type="text" class="vb-y">
                宽<input type="text" class="vb-width">
                高<input type="text" class="vb-height">
            </div>
        </div>
    </div>

二、拖拽代码的实现

通过Jquery的on方法实现未来元素绑定，给所有vb-container增加“mousedown”（鼠标按下）事件。

$(function(){
    $(".vb-move-container").on("mousedown",".vb-container",function(e){
        ...
    });
})

然后我们需要让通过鼠标在点击的时候，移动的距离clientX和clientY得到应该给当前div位移的距离

$(function(){
    $(".vb-move-container").on("mousedown",".vb-container",function(e){
        var ele = $(this);
        ele.css('position','absolute');
        var disX = e.clientX-ele.position().left;
        var disY = e.clientY-ele.position().top;
        $(document).on("mousemove",function(e){
            ele.css("left",e.clientX-disX);
            ele.css("top",e.clientY-disY);
            getXY(ele);
            changeDivTB(ele);
        })
        
        $(document).on("mouseup",function(){
            $(document).off();
        })
    });
})

到这里，DIV就可以开始移动了，并且如果你添加一个DIV

<button οnclick="add()">添加</button>

function add(){
    let str = `
    <div class="vb-container" style="top:50%;left:45%;">
        <div class="vb-demo" style="background: #f60;"></div>
        <div class="vb-option vb-option-top vb-option-right">
            X轴<input type="text" class="vb-x">
            y轴<input type="text" class="vb-y">
            宽<input type="text" class="vb-width">