I would like to implement the following:
- I have a source container filled with a list of draggable items.
- I have a target sortable container filled with elements the same as the original elements
When I drag an element from the source to the target, I would like to decide what to do with the draggable (helper clone):
- paste before the mouse over the end
- replace mouse element with <- New requirement!
- paste after the mouse over the end
Any help is much appreciated! Thanks!
Example (without required replacement function) Demo http://jsfiddle.net/8eBDD/15/
<html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type='text/javascript' src='http://code.jquery.com/jquery-1.6.2.js'></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.js"></script> <script type="text/javascript"> function pageLoad() { $(function () { $( "#source .item" ).draggable({ connectToSortable: '#target', cursor: 'move', helper: 'clone' }).disableSelection(); $( "#target" ).sortable({ </script> <style type="text/css"> body { font-family: Arial; } .container { background-color: silver; padding: 5px; } .item { margin: 5px; padding: 3px; border: 1px dotted silver; background-color: white; } .placeholder { height: 1.5em; } </style> </head> <body> SOURCE <div id="source" class="container"> <div class="item">draggable 1<br/>2<sup>nd</sup> line</div> <div class="item">draggable 2</div> </div> <br/> TARGET <div id="target" class="container"> <div class="item">pre-filled 1</div> <div class="item">pre-filled 2</div> </div> </body> </html>
source share