Stop Dragging in jQuery

Question

I have a simple dragging issue.

I have a container(guide) with lots of child divs.

When any element is clicked, it starts dragging the parent, but I can't seem to get it to stop the drag on mouse up:

          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');
            });

Any ideas?

EDIT 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');
    });