CODEWITHSUNDEEP
jqueryjquery-uijquery-ui-draggable
pedalpete
pedalpete

Reputation: 21536

how to set the start position of jquery UI draggable

I'm using jQuery UI and isotope, isotope does a bunch of things to the positioning of elements, and is messing up the start position of a dragged element.

When I start a drag, the element I am attempting to drag shows up in the top left of the parent, rather than underneath the cursor.

I've looked at the 'start' function, and I get the correct x,y coordinates from the event, but I can't seem to apply those values to the cloned draggable item.

My code looks like this

jQuery('div.item').draggable({
         helper: function(event, ui){
                 jQuery('div.hold_items').isotope('destroy');
                  var item_dragged = jQuery(this).clone().appendTo('body').css({'z-index':500,'top':event.clientY, 'left':event.clientX});
                 start_isotope();
                 return recipe_dragged;

         }
});

I have to do the start/stop isotope to resolve an issue where isotope is breaking the droppable function and items don't know where they are being dropped.

I'm sure there is a way to SET the draggable start-position, but I can't seem to find it in the documentation, just a way to get the start.

Upvotes: 4

Views: 7732

Answers (2)

user3591153
user3591153

Reputation: 419

Posting my answer because I couldn't find the answer anywhere else- I had problems you are describing, and I solved it this way.. position the helper (it will try to get reset to 0,0) Then we return false before it is reset to 0,0 It is canceled and at the correct position, but then we restart the drag by copying the event that was used to initiate the drag.

$(" #container").droppable({
drop: function (event, ui) {
    $(ui.draggable).detach().css({
        top: 0,
        left: 0
    }).appendTo(this);

}
});

$(" #draggable").draggable({
start: function (event, ui) {
    if ($(event.target).parent().is('.ui-droppable')) {
        var x = ($(this).offset().left);
        var y = ($(this).offset().top);
        var p = $(event.target).parent().parent();
        $(event.target).detach().insertAfter(p);
        $(ui.helper).css({
            'left': x - $(event.target).offset().left,
            'top': y - $(event.target).offset().top
        });
        var eventCopy = document.createEvent("MouseEvents");
        eventCopy.initMouseEvent(event.type, event.bubbles, event.cancelable, event.view, event.detail,
        event.pageX || event.layerX, event.pageY || event.layerY, event.clientX, event.clientY, event.ctrlKey, event.altKey,
        event.shiftKey, event.metaKey, event.button, event.relatedTarget);
        ui.dispatchEvent(eventCopy);
        return false;
    }
}
});

Upvotes: 1

Ruben Verschueren
Ruben Verschueren

Reputation: 842

for jquery you can try using event.pageX and event.pageY as explained here.

Upvotes: 0

Related Questions