0

私はほとんどのコードをまとめましたが、いくつかのことを機能させることはできません: -

  1. 「選択された DVD」領域の項目 このリストでのみこれらの DVD の順序を変更できるようにする必要があるため、順序を 1、2、3 から 3、1、2 に変更できます。

  2. 「選択されていない」領域のアイテムは、選択された DVD 領域にドラッグされません

  3. 上部の「選択されていない DVD をすべて追加する」リンクをクリックしてから、「選択したすべての DVD を削除する」リンクをクリックしても、下部の正しい領域に追加されません。ただし、最初に「選択したすべてのDVDを削除」リンクをクリックすると...動作します

  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. Connect Listsオプション をチェックしてください[編集]あなたの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 に答える