javascript - 使 div 可移动但不能移动其子元素

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