Reputation: 3746
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/
Upvotes: 0
Views: 71
Reputation:
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');
});
Upvotes: 1