-2

この 2 つの例 (ドラッグ アンド ドロップ時にクラス名を変更し、その逆 - jqueryUI ) と ( POST 経由で UL を送信する最良の方法は? ) に基づいて、3 つのカテゴリ リストを持つフォームを作成しようとしています。

最初のリストには完全なリストが含まれており、フォームから送信されたリストに、必要なカテゴリをドラッグします。それらをメイン、ファースト、セカンドと呼びましょう。

私がやりたいのは、ui アイテムのクラスを変更することですが、以下の例のように定義済みの名前のクラスを使用するのではなく、クラス名をリストにドロップして自動的に変更します。そのため、アイテムをメイン リストから最初のリストにドロップすると、スクリプトで自動的にリスト名を検出し、アイテム クラスをその名前に変更する必要があります。

私はこれではっきりしているのかどうかわかりません。

どんな助けでも感謝します。

これが私がこれまでに持っているものです

<form action="prueba.html" method="get" accept-charset="utf-8">
<ul id="todos" class="droptrue ui-sortable" name="all">
  <li class="sortedli">
    1<input type='hidden' name='cats' value='1'/>
  </li>
  <li class="sortedli">
    2<input type='hidden' name='cats' value='2'/>
  </li>
  <li class="sortedli">
    3<input type='hidden' name='cats' value='3'/>
  </li>
</ul>


<ul id="seleccionados" class="droptrue ui-sortable" name="selected">
  <li class="sortedli" style="">
    4<input type='hidden' name='selected' value='4'/>
  </li>
  <li class="sortedli" style="">
    5<input type='hidden' name='selected' value='5'/>
  </li>
  <li class="sortedli" style="">
    6<input type='hidden' name='selected' value='6'/>
  </li>
</ul>
<input type="submit" name="submit" id="submit" value="Enviar" />

</body>



<script type="text/javascript">

var lists = [{
    "listid": "#todos",
    "connectid": "#seleccionados"
}, {
    "listid": "#seleccionados",
    "connectid": "#todos"
}];
$.each(lists, function(i, list) {
    $(list.listid).sortable({
        connectWith: list.connectid,
        opacity: 0.7,
        start: function(event, ui) {
            if ($(ui.item).parents('#todos').length > 0) {
                $(ui.item).addClass('dropped');
            } else {
                $(ui.item).addClass('sorted');
            }
        },
        stop: function(event, ui) {
            if ($(ui.item).parents('#todos').length > 0) {
                $(ui.item).switchClass('droppedli', 'sortedli');

            } else {
                $(ui.item).switchClass('sortedli', 'droppedli');

            }
            $(ui.item).removeClass('sorted');
            $(ui.item).removeClass('dropped');
        }
    });
});

// BOTTOM OF PAGE
</script>

私はまだそれを機能させようとしています。これらの行で遊んで、'sorteli' と 'droppedli' を変更して、アイテムをドロップする親リストの属性の値を取得する必要があると思います

        stop: function(event, ui) {
           if ($(ui.item).parents('#all-colls-list').length > 0) {
                $(ui.item).switchClass('droppedli', 'sortedli');
           } else {
                $(ui.item).switchClass('sortedli', 'droppedli');
           }
           $(ui.item).removeClass('sorted');
           $(ui.item).removeClass('dropped');
        }
   });
4

1 に答える 1

0

私の質問が十分に明確でない場合は申し訳ありません。

たぶん、これは将来誰かを助けることができます。

よろしく

<body>
<form action="prueba.html" method="get" accept-charset="utf-8">
<ul id="all-colls-list" class="droptrue ui-sortable" name="todos">
  <li class="sortedli" name="">
    1<input type='hidden' name='cats' value='1'/>
  </li>
  <li class="sortedli" name="">
    2<input type='hidden' name='cats' value='2'/>
  </li>
  <li class="sortedli" name="">
    3<input type='hidden' name='cats' value='3'/>
  </li>
</ul>


<ul id="coll-selected-list" class="droptrue ui-sortable" name="seleccionados">
  <li class="sortedli" name="">
    4<input type='hidden' name='cats' value='4'/>
  </li>
  <li class="sortedli" name="">
    5<input type='hidden' name='cats' value='5'/>
  </li>
  <li class="sortedli" name="">
    6<input type='hidden' name='cats' value='6'/>
  </li>
</ul>
<input type="submit" name="submit" id="submit" value="Enviar" />

</body>



<script type="text/javascript">


// BOTTOM OF PAGE
var lists = [{
    "listid": "#all-colls-list",
    "connectid": "#coll-selected-list"
}, {
    "listid": "#coll-selected-list",
    "connectid": "#all-colls-list"
}];
$.each(lists, function(i, list) {
    $(list.listid).sortable({
        connectWith: list.connectid,
        opacity: 0.7,
        start: function(event, ui) {
            if ($(ui.item).parents('#all-colls-list').length > 0) {
                $(ui.item).addClass('dropped');
            } else {
                $(ui.item).addClass('sorted');
            }
        },
        stop: function(event, ui) {
            if ($(ui.item).parents('#all-colls-list').length > 0) {
                $(ui.item).switchClass('droppedli', 'sortedli');
                $(ui.item).attr('name', $(ui.item).closest("ul").attr('name'));
                $(ui.item).children("input").attr('name', $(ui.item).closest("ul").attr('name'));

            } else {
                $(ui.item).switchClass('sortedli', 'droppedli');
                $(ui.item).attr('name', $(ui.item).closest("ul").attr('name'));
                $(ui.item).children("input").attr('name', $(ui.item).closest("ul").attr('name'));

            }
            $(ui.item).removeClass('sorted');
            $(ui.item).removeClass('dropped');
        }
    });
});

</script>

</html>
于 2012-12-05T18:46:13.087 に答える