Strange jQuery UI - Drag and Drop NOT clone

Question

I am new to jQuery and UI ..

I can not understand whole drag & drop & clone & save to DB process of DOM Object with jQuery and jQuery UI.

I got some strange situations:

The helper clone does not work at all.

With following Codes the original div drags, not clone does.

<!doctype html>
<html lang="en">
<head>

<style>
#makeMeDraggable { float: left; width: 100px; height: 100px; background: red; }
#makeMeDroppable { float: left; left: 0px; width: 300px; height: 300px; border: 1px solid #999; }
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>

<script type="text/javascript">

$( init );

function init() {
  $('#makeMeDraggable').draggable( {
    revert:"invalid", 
    help:'clone',
    containment:"#makeMeDroppable"
  });

  $('#makeMeDroppable').droppable( {

    drop: handleDropEvent
  } );
}

function handleDropEvent( event, ui ) {
  var draggable = ui.draggable;

//  console.log( 'The square with ID "' + draggable.attr('id') + '" was dropped onto me!' );
}

</script>

</head>
<body>

<div id="content" style="height: 400px;">

  <div id="makeMeDraggable"> </div>
  <div id="makeMeDroppable"> </div>

</div>

</body>
</html>

And even It is "help:'clone' " not "helper:'clone'"

"helper:'clone'" is not working ...

You can check at http://jsfiddle.net/JEdtX/6/

What happening in my code? (Actually I gor the source from internet .. )

score 0 · Answer 1 · answered Nov 03 '13 at 11:53

With helper: 'clone', it is in fact creating a clone of your <div> element. You can see it in your favorite DOM inspector (Firebug, Chrome developer tool, or whatever). Try adding some content to your element, and you will see it.

You may add some css (like a background color) to .ui-draggable-dragging class if you want to see it even if the clone is empty.

Strange jQuery UI - Drag and Drop NOT clone

1 Answers1