0

我已经把大部分代码放在一起，只是不能让一些东西工作：-

  1. “选定的 DVD”区域中的项目我只需要能够更改此列表中这些 DVD 的顺序，因此我可以将顺序从 1、2、3 更改为 3、1、2。

  2. “未选择”区域中的项目不会向上拖动到选定的 dvds 区域

  3. 如果我单击顶部的链接“添加所有未选择的 dvd”，然后单击链接“删除所有选定的 dvd”，它不会将它们添加到底部的正确区域。但是，如果您首先单击“删除所有选定的 dvds”链接......它可以工作

  4. 在#3 之后，如果我在右上角添加新的 dvd，有时它会添加相同 dvd 的负载？

这是我到目前为止的工作演示：http: //jsfiddle.net/BFWzS/1/

上面的小提琴中有更多代码^

// let the gallery items be draggable
$( "li", $gallery ).draggable({
  cancel: "a.ui-icon", // clicking an icon won't initiate dragging
  revert: "invalid", // when not dropped, the item will revert back to its initial position
  containment: "document",
  helper: "clone",
  cursor: "move"
});

// let the trash be droppable, accepting the gallery items
$trash.droppable({
  accept: "#gallery > li",
  activeClass: "ui-state-highlight",
  drop: function( event, ui ) {
    deleteImage( ui.draggable );
  }
});

希望有人可以帮助我们，

干杯

4

1 回答 1

3

正如我的评论所建议的那样，您应该将其分解为更具体的问题并将它们作为单独的问题提出。但这里有一些信息可以帮助您：

  1. 查看JQuery 可排序

  2. 查看连接列表选项 [EDIT]在您的 JSFIddle 中，我不存在您的问题（在 Chrome 中）

  3. 这应该是一个单独的问题（尽管您可能已经找到了这个问题的副本）

  4. 如果您对 3 的回答没有解决，那么应该是一个附加问题

为了获得更有意义的答案，这里有一些示例代码显示了 JQuery Sortable 的使用：

<div class="container">
    <div class="header">Selected DVDs</div>
    <ul id="gallery" class="dvdlist">
        <li>DVD 1</li>
        <li>DVD 2</li>
        <li>DVD 3</li>
    </ul>
</div>
<div class="container">
    <div class="header">Un-selected DVDs</div>
    <ul id="trash" class="dvdlist">
        <li>DVD 4</li>
        <li>DVD 5</li>
        <li>DVD 6</li>
    </ul>
</div>

$("#gallery").sortable({
    connectWith: "#trash"
});
$("#trash").sortable({
    connectWith: "#gallery"
});

你可以在这里看到这个。

于 2013-03-21T11:15:35.020 回答