Question

我正在使用jquery ui搜索示例，可以对以下场景进行拖放，拖放

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

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

Answer 1

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

Sortable 1表示第1列，第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

jquery ui可排序，拖放数据分配

1 个答案: