CODEWITHSUNDEEP
jquery-uidrag-and-drop
Dave
Dave

Reputation: 666

jquery ui drop not working with helper clone

I have a simple drag and drop using jquery ui. I want to clone the element and drop the clone at the cursor position. 

$(function() {
    $( "#draggable" ).draggable({
        grid: [ 20, 20 ],
        //helper: 'clone',
    });

    $("#dropzone-panel").droppable({
        drop: function(event, ui) {
            console.log("Drop Event Fired");
        }
    });

});

I can drag the element and when I drop it, it stays in the correct position.

But I don't want to move the original, I want to clone it, and then drop the clone in place.

I tried calling clone and adding an appendTo in the drop function, but this just appends it to the end of the #dropzone-panel, rather than leaving it in place.

Any idea what I need to do, to clone and drop at the cursor position?

Upvotes: 1

Views: 2125

Answers (1)

Twisty
Twisty

Reputation: 30883

I would setup the draggable with the helper option and then the droppable with the accept option. This might look like:

$(function() {
  $(".draggable").draggable({
    helper: 'clone',
    grid: [ 20, 20 ],
    appendTo: ".droppable"
  });
  $(".droppable").droppable({
    accept: ".draggable",
    drop: function(e, ui) {
      var pos = ui.position;
      var $obj = ui.helper.clone();
      $obj.css({
        position: 'absolute',
        top: pos.top + "px",
        left: pos.left + "px"
      });
      $obj.appendTo(".droppable");
    }
  });
});

You will want to make use of CSS to wrap your Droppable in a Div that has position: relative; to ensure that the absolute positioning of the appended element is maintained.

Upvotes: 2

Related Questions