1

ドラッグ可能およびドロップ可能な機能を使用しようとしています。非常に多くのフォルダーがあり、outlook.com のようにフォルダーを別のフォルダーに移動したいと考えています。すべてのフォルダーは、次のような li 要素の形式です。

<div id="test">
  <ul>
    <li>.....</li>
    <li>.....</li>
    <li>.....</li>
    <li>.....</li>
  </ul>
</div>

以下のコードを使用してドラッグアンドドロップしました。ドラップ アンド ドロップを行うと、li 要素の位置が移動せず、代わりにスタイルの上と左が追加されます。li 要素を削除し、ドロップされたターゲット要素に追加したいと考えています。

     $('#test ul li').draggable({
      cursor: 'move'          
    });
    $('#test ul li').droppable({});

以下はoutlook.comからの画像です。フォルダ構造は次のようになります。

ここに画像の説明を入力

受信トレイ、アーカイブ、送信済み、削除済みのフォルダーを移動したくありません。それらのアイテムの下にフォルダーを移動したい。削除済みから送信済みまでの「sdfsdf」フォルダのように。

これを達成する方法。

4

3 に答える 3

0

このJSFiddleは、探しているものです。最上位のリスト項目を含まない非常に基本的なドラッグ ドロップ機能を実装します。

以下のコードを使用します。

$(document).ready(function() {
    $('#test ul li ul li').draggable({
      revert: "invalid", // when not dropped, the item will revert back to its initial position
      containment: "document",
      helper: "clone",
      cursor: 'move'          
    });
    $("#test ul li ul").droppable({
      hoverClass: "droppable-hover",
      activeClass: "ui-state-highlight",
      drop: function( event, ui ) {
        var $item = ui.draggable;
        $item.appendTo($(this));
      }
    });
});

このコードは、すべてのサブ項目をドラッグ可能にし、すべてのサブ リストをドロップ可能にしますが、初期レベルの項目は無視します。アイテムを新しいリストにドラッグするULと、アイテムがそのリストに追加され、以前のリストから削除されます。

于 2013-10-03T10:32:23.783 に答える
0

不要な要素を除外するだけです。

例えば：

// select only sub list
$('#test ul li li').draggable();
$('#test ul li li').dropable();
于 2013-10-03T10:32:56.710 に答える
0

" disable" メソッドを使用して、特定の要素のドラッグ オプションを無効にします

$( ".selector" ).draggable( "disable" );
于 2013-10-03T10:23:02.080 に答える