Question

我想让div移动。 div有子div元素。你可以在这里查看jsfiddle：http://jsfiddle.net/TsW5F/2/

我只希望容器（大多数div）可以移动。目前，内部文本可以在没有外部div的情况下移动。最外层的容器div应始终与其余的子元素一起移动。

    <div id="id">
           <div>second div</div>
           <div>third element</div>
   </div>

$(document).ready(function() {
    var $dragging = null;

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

    $('#id').on("mousedown", null , function (e) {
        $dragging = $(e.target);
    });

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

Answer 1

问题是行$dragging = $(e.target);，而是使用$dragging = $(this);

$(document).ready(function () {
    var $dragging = null;

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

    $('#id').on("mousedown", null, function (e) {
        $dragging = $(this);
    });

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

演示：Fiddle

Answer 2

只需检查拖动开始它实际上是父div：

http://jsfiddle.net/TsW5F/4/

$('#id').on("mousedown", null , function (e) {
    if ($('#id').is(e.target))
    {
        $dragging = $(e.target);
    }
});

正如Arun P Johny指出的那样，$（this）将给出JQuery目标，而不是鼠标目标。这意味着$dragging = $(this)更整洁，更简单。

使div可移动但不是其子元素

2 个答案:

http://jsfiddle.net/TsW5F/4/