CODEWITHSUNDEEP
javascriptjqueryhtmljquery-uidrag-and-drop
Colin747
Colin747

Reputation: 5013

jQuery - drag and drop of cloned element

I have a cloned element which I am able to drag however I wish to drop it in a specific div element and if valid not revert back to its original position, however it is always reverting back to its original position whether it is valid or not.

I am currently using the code below:

  $("ul#objectsList li").draggable({ 
      revert: 'invalid',
      snap: "#objectsDropBox", 
      snapMode: "inner",
      helper: function() { return $(this).clone().appendTo('body').show(); },
      start: function(e, ui) { $(ui.helper).addClass("ui-draggable-helper");}
   });

   $("#objectsDropBox").droppable({
     accept: "ul#objectsList li",
     drop: function( event, ui ) {
       alert('hi');
     }
   });

Why is it not staying in the div when a valid draggable is dropped?

Upvotes: 1

Views: 2238

Answers (1)

PSL
PSL

Reputation: 123739

Try this

    $("#objectsDropBox").droppable({
    accept: "ul#objectsList li",
    drop: function (event, ui) {
        $(this).append(ui.draggable); 
       //if you want to retain the element use ui.draggable.html() or clone it.

    }
});

Fiddle - http://jsfiddle.net/dmNhZ/

Upvotes: 1

Related Questions