javascript - 使用javascript的可拖动DIV

<分区>

我想制作可拖动的div 我知道这可以使用 Jquery 插件来完成，但我不想使用，因为我只需要可拖动功能。那么我怎样才能使可拖动功能我做过这个

$(document).ready(function(e){
                $("#eve").mousemove(function(e){
                    var p=$(this);
                    var offset = p.offset();
                    var ol=offset.left;
                    var ot=offset.top;
                    var l=e.pageX-ol;
                    var t=e.pageY-ot;
                    var eX=e.pageX;
                    var eY=e.pageY;
                    var htm="left:"+ol+" top:"+ot+"<br/>";
                    htm+="eX:"+eX+" eY:"+eY+"<br/>";
                    htm+="curX:"+l+" curY:"+t+"<br/>";
                    htm+="l:"+(ol-l)+" t:"+(ot-t);
                    p.html(htm);
                   p.css({left:((eX-3))+"px",top:((eY-3))+"px"});
                });

最佳答案

这是我的快速即兴创作。也许这正是您要找的。

$("div").on({
    mousemove: function(e) {
        var el = $(this);
        var data = el.data("down");
        if (data) {
            el.css({
                left: e.pageX - data.left,
                top: e.pageY - data.top
            });
        }
    },
    mousedown: function(e) {
        var el = $(this);
        var pos = el.offset();
        el.data("down", {
            left: e.pageX - pos.left,
            top: e.pageY - pos.top
        });
    },
    mouseup: function() {
        $(this).data("down", false);
    }
});

演示: http://jsfiddle.net/UBKBb/

关于javascript - 使用javascript的可拖动DIV，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10896949/

上一篇：javascript - 除非在页脚中执行，否则脚本不起作用

下一篇：javascript - 使用javascript同步获取CRM 2011中的元数据

相关文章：

javascript - 访问 Ajax 调用中加载的数组元素

javascript - TypeScript:如何在字符串数组上使用 Array.includes 可能未定义的值(可选链接)

javascript - 使用 Jquery 突出显示事件菜单

javascript - 没有目标的 HREF 链接，不想使用 hash 或 void(0)

javascript - 向切换为显示文本的标题添加向上或向下箭头

jQuery:将数字添加到有序列表中

javascript - 将罗马数字转换为阿拉伯数字——recursiv

javascript - IE9+ 弄乱了我的 JSON 对象

javascript - JQuery 同位素在追加后排序

javascript - 无法使用 jquery 设置选择的选定值