Using helper: 'original' with sortable() and draggable() doesn't appear to work
Question
I have a simple HTML page on which I want to be able to drag the divs numbered 6-10 into the sortable list, which already contains divs numbered 1-5. When I set the draggable helper value to 'clone', this page works perfectly well. However, I want to use the 'original' helper. This doesn't appear to work at all.
Can anyone suggest an alternative? I've tried making "dropTarget" a droppable() area, but that doesn't seem to work. I imagine they are conflicting with each other or something. Any advice would be very welcome!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/jquery-1.5.1-vsdoc.js" type="text/javascript"></script>
<script src="Scripts/jquery-1.5.1.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui-1.8.11.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#dropTarget").sortable({ revert: true });
$("#itemlist div").draggable({ connectToSortable: "#dropTarget", helper: 'original', revert: 'invalid' });
$('#itemlist div, #dropTarget').disableSelection();
});
</script>
</head>
<body>
<div id="dropTarget" style="width: 100px; min-height: 50px; background-color: Red;">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
<div>Item 5</div>
</div>
<div id="itemlist">
<div>Item 6</div>
<div>Item 7</div>
<div>Item 8</div>
<div>Item 9</div>
<div>Item 10</div>
</div>
</body>
</html>
1 answers
solution1
4 ACCPTED 2011-10-17 11:50:25
I have modified your fiddle here : http://jsfiddle.net/3wCHu/5/
As jquery documentation says that it not possible to connect to a sortable list when using helper:"original" . We can have a workaround.
First thing you can put helper code in your #itemlist as -
helper: function(ev, ui) { return "<div>" + $(this).text() + "</div>" }
Secondly, in your #dropTarget code add an option as -
receive: function(ev, ui){ ui.item.remove() }
Here ui.item refers to the item that is dragged.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.