jQuery UI sortable - How to replace existing item or insert new draggable depending on position
I would like to implement the following:
- I have a source container populated with a list of draggable items
- I have a target sortable container populated with items of the same kind as the source items
When I drag/drop an item from source to target, I would like to decide what to do with the draggable (helper clone):
- insert before item mouse is over
- replace item mouse is over <-- New requirement!
- insert after item mouse is over
Any help is highly appreciated! Thanks!
Example (without the wanted replace feature) 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({
// ----- remove item from container if dragged out ----
receive: function (e, ui) { inout = 1; },
over: function (e, ui) { inout = 1; },
out: function (e, ui) { inout = 0; },
beforeStop: function (e, ui) { if (inout == 0) ui.item.remove(); },
// ----------------------------------------------------
dropOnEmpty: true,
tolerance: 'pointer',
placeholder: 'placeholder',
cursor: 'move'
}).disableSelection();
});
};
</script>
<style type="text/css">
body {
font-family: Arial;
}
.container {
background-color: silver;
padding: 5开发者_运维问答px;
}
.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>
加载中,请稍侯......
精彩评论