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: 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>

来源：https://stackoverflow.com/questions/7177166/jquery-ui-sortable-how-to-replace-existing-item-or-insert-new-draggable-depend

标签

jquery-ui

jquery-ui-sortable

jquery-ui-draggable