Question

我想实现以下内容：

我有一个填充了 draggable 项目列表
我有一个目标可排序的容器，其中填充了项目与源项目相同

当我将项目从源项目拖放到目标时，我想决定如何处理draggable（辅助克隆）：

在项目鼠标结束之前插入
替换项目鼠标已超过 ＆lt; - 新要求！
插入

非常感谢任何帮助！谢谢！

示例（没有想要的替换功能）演示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>

jQuery UI sortable - 如何替换现有项目或根据位置插入新的draggable

0 个答案: