CODEWITHSUNDEEP
jquerycssjquery-uidraggabledroppable
Kaijin
Kaijin

Reputation: 51

jqueryui draggable reposition offset while dragging

I have elements with margin:0px auto; set that I'm trying to drag. When the drag begins, the element is shifted to the left, not accounting for the automatic margin. The draggable is significantly to the left of the cursor. I'm trying to drag the element to a droppable that is to the right of the element. Because of this offset, the droppable does not activate. If I resize the window so that the auto margin is next to nothing, the element will properly activate the droppable.

I've tried cursorAt, and changing the css of the draggable inside the drag function but neither is working. The same thing happens with a clone helper. If I console out the dragging function it looks like it's working but the element isn't actually shifted to the right where it should be. 

start: function(e, ui){
            $(ui.helper).addClass("ui-draggable-helper");
            window.cloneoffset = parseInt($(this).css('margin-left'));
            console.log(window.cloneoffset);
        },
        // cursorAt:{left:window.cloneoffset}
        drag:function(){        
            $('.ui-draggable-helper').css('left',(parseInt($('.ui-draggable-helper').css('left'))+window.cloneoffset)+'px');            
        }

Upvotes: 0

Views: 1329

Answers (1)

Kaijin
Kaijin

Reputation: 51

Welp, turns out I worked around it by putting another div around the draggable that does the margin auto part and removed the auto margin from the draggable.

Upvotes: 3

Related Questions