在jQuery中停止拖动

Question

我有一个简单的拖动问题。

我有一个有很多子div的容器（指南）。

当点击任何元素时，它会开始拖动父元素，但我似乎无法阻止鼠标向上拖动：

          var $dragging = null;
            $('#guide').on("mousedown", "div", function(e) {

                e.stopPropagation();

                $('#guide').attr('unselectable', 'on').addClass('draggable');
                var el_w = $('.draggable').outerWidth();

                $('#guide').on("mousemove", function(e) {
                    if ($dragging) {
                        $('#guide').offset({
                            left: e.pageX - el_w / 2
                        });
                    }
                });
                $dragging = $('#guide');
            }).on("mouseup", "body", function(e) {
                $dragging = null;
                $('#guide').removeAttr('unselectable').removeClass('draggable');
            });

有什么想法吗？

编辑http://jsfiddle.net/hwvvu2rg/

Answer 1

    var $dragging = null;

    $('#guide').on("mousedown", "div", function(e) {

        e.stopPropagation();

        $('#guide').attr('unselectable', 'on').addClass('draggable');
        var el_w = $('.draggable').outerWidth();

        $(document).on("mousemove", function(e) {
            if ($dragging) {
                $('#guide').offset({
                    left: e.pageX - el_w / 2
                });
            }
        }).on("mouseup", function(e) {
            $dragging = null;
            $('#guide').removeAttr('unselectable').removeClass('draggable');
        });

        $dragging = $('#guide');
    });