0

I'm doing a site in DnD and when you drop the image in the div on the right side it does not stay in the desired position (green area)
https://i.stack.imgur.com/xKft0.jpg
How can I make dropping free?

Thanks for everything and sorry for my bad english

Sora
  • 167
  • 1
  • 8

1 Answers1

0

Here is a perfect example of free movement while snapping to a grid or other element. Hope it helps!

https://jqueryui.com/draggable/#snap-to

As you can see from the source the drag gable element can move freely, but we also give it the option to snap to certain elements using 'snap'. 

  $( function() {
    $( "#draggable" ).draggable({ snap: true });
    $( "#draggable2" ).draggable({ snap: ".ui-widget-header" });
    $( "#draggable3" ).draggable({ snap: ".ui-widget-header", snapMode: "outer" });
    $( "#draggable4" ).draggable({ grid: [ 20, 20 ] });
    $( "#draggable5" ).draggable({ grid: [ 80, 80 ] });
  } );

Also here is an example of reverting the element back to it's original position if it isn't snapped to another element.

$(function() {
    $("#draggable").draggable({
        revert : function(event, ui) {
            // on older version of jQuery use "draggable"
            // $(this).data("draggable")
            // on 2.x versions of jQuery use "ui-draggable"
            // $(this).data("ui-draggable")
            $(this).data("uiDraggable").originalPosition = {
                top : 0,
                left : 0
            };
            // return boolean
            return !event;
            // that evaluate like this:
            // return event !== false ? false : true;
        }
    });
    $("#droppable").droppable();
});

Revert a jQuery draggable object back to its original container on out event of droppable

  • Thanks !! :) i got it – Sora Sep 12 '17 at 18:20
  • Yay! No problem at all! :) –  Sep 12 '17 at 18:24
  • Steven, sorry for disturbing it again, this code freely moves the image in the div itself, in this case, I would like to move it in another div. I suspect the setting is in this other div, am I right? – Sora Sep 12 '17 at 19:48
  • Correct! Using snap you can you can snap it to the div you want, then if it's not the div you want my second example shows how to put it back where it was. So you can always make sure it's moved to the correct div. Please accept answer! :) –  Sep 12 '17 at 19:52