Question

I am using jQuery’s draggable and droppable in order to drop content elements onto a page element:

<h2>Page</h2>

<div id='page-content'>

</div>

<div id='content-elements'>
  <div id='text-element' class='content-element'>Text</div>
  <div id='date-element' class='content-element'>Date</div>
</div>​

My JS for the draggable looks like this:

$elements.draggable({
  revert: true
});

The reason I have that revert in there is that I want the content element to return to the list of elements and a ‘duplicate’ to be added to the page.

I tried doing this using this js for the droppable (created using coffeescript):

$('#page-content').droppable({
  drop: function(event, ui) {
    var $element, $me;
    $me = $(this);
    $element = $(ui.draggable);
    console.log($element.clone(false));
    return $element.clone().appendTo($me);
  }
});

What this does is get the ui element that was dragged, attempt to clone it and then append it to the page.

This however does not work! Even though I CAN get the div, etc from the ui.draggable.

I created a jsfiddle to illustrate the problem:
http://jsfiddle.net/sw4Gc/2/

Why oh why?

Answer 1

The element was cloned in a state where it is in position relative and is outside the element. you have to remove the element styles:

var $newElement = $element.clone();
$newElement.attr('style', '');
$newElement.appendTo($me);