Draggable div没有jQuery UI

前端之家收集整理的这篇文章主要介绍了Draggable div没有jQuery UI前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
正如标题所说,我想使一个div可拖动,而不使用jQuery UI。

但是,我坚持下面的代码。我理解,我将使用相对于容器div(其中div将被拖动)的鼠标位置,我将设置divs相对于那些值的偏移。

我只是不知道如何。任何线索对我?

这段代码(当然)不工作:

var X,Y;

$(this).mousedown(function() {
    $(this).offset({ 
        left: X,top: Y
    });
});

$("#containerDiv").mousemove(function(event) {
    X = event.pageX;
    Y = event.pageY;
});

解决方法

这里有一个非常简单的例子,可能会让你开始:
$(document).ready(function() {
    var $dragging = null;

    $(document.body).on("mousemove",function(e) {
        if ($dragging) {
            $dragging.offset({
                top: e.pageY,left: e.pageX
            });
        }
    });


    $(document.body).on("mousedown","div",function (e) {
        $dragging = $(e.target);
    });

    $(document.body).on("mouseup",function (e) {
        $dragging = null;
    });
});

示例:http://jsfiddle.net/Jge9z/

I understand that I shall use the mouse position relative to the container div (in which the div shall be dragged) and that I shall set the divs offset relative to those values.

不太确定。在我看来,在拖放你总是想使用相对于文档的元素的偏移量。

如果你想限制拖动到一个特定的区域,这是一个更复杂的问题(但仍然可行)。

原文链接:https://www.f2er.com/css/222662.html

猜你在找的CSS相关文章