-1

我正在搜索使用 jquery ui 排序的示例，拖放以用于以下场景

我有 2 列，其中一列包含不同的行数，另一列应作为数据分配的占位符。我的意思是说：

Column with items to be assigned          the desired item should be dragged here
    ------------------                     ---------------------
    - item1
    ------------------                     ---------------------
    - item2
    ------------------                     ---------------------
    - item3                                 - item4
    ------------------                     ---------------------
4

1 回答 1

1

您可以使用 jQuery UI 的 sortable 的连接列表功能来执行此操作，

Sortable 1 表示 Column 1，Column 2 由 Sortable 2 表示。连接两个列表并将第二个列表设置为空，以便用户可以将他们的项目拖到列表中。此外，为第二个列表添加背景，以便用户知道将项目拖动到哪里。

<script>
  $(function() {
    $( "#sortable1, #sortable2" ).sortable({
      connectWith: ".connectedSortable"
    }).disableSelection();
  });
  </script>
</head>
<body>

<ul id="sortable1" class="connectedSortable">
  <li class="ui-state-default">Item 1</li>
  <li class="ui-state-default">Item 2</li>
  <li class="ui-state-default">Item 3</li>
  <li class="ui-state-default">Item 4</li>
  <li class="ui-state-default">Item 5</li>
</ul>

<ul id="sortable2" class="connectedSortable">
</ul>

这个小提琴：http: //jsfiddle.net/pxtLj/1/

来源：http: //jqueryui.com/sortable/#connect-lists

于 2013-04-13T09:51:24.347 回答