5

免責事項 - これが可能かどうかは完全にはわかりません。しかし、その場合でも、可能な代替案または何らかのハックを誰かに指摘してもらいたいと思います。

これが状況です。

ユーザーがリスト上の項目をドラッグ アンド ドロップできるように、jQuery UI Sortable を使用する作業リストがあります。

jQuery:

$(document).ready(function() {
    $("#test-list").sortable({
      handle : '.big-handle',
      update : function () {
          var order = $('#test-list').sortable('serialize');
        $("#info").load("../sortable/process-sortable.php?"+order);
      }
    });
});

Ajax 部分は新しい順序をデータベースに保管します。それについて心配する必要はありません。

HTML:

<ul id="test-list">
<li id='listItem_1'><div class='main-item big-handle'><img src='../sortable/arrow.png' alt='move' width='16' height='16' class='handle' /><strong>Item 1</strong></div></li>
<li id='listItem_2'><div class='main-item big-handle'><img src='../sortable/arrow.png' alt='move' width='16' height='16' class='handle' /><strong>Item 1</strong></div></li>
<li id='listItem_3'><div class='main-item big-handle'><img src='../sortable/arrow.png' alt='move' width='16' height='16' class='handle' /><strong>Item 1</strong></div></li>
</ul>

それはすべてうまくいきます。さて、トリッキーな部分です。私のクライアントは、ユーザーが番号を入力できる各リスト項目の横に入力フィールドを必要としています。これonBlurにより、そのリスト項目が指定された位置に移動する必要があります。したがって、ユーザーがリスト項目番号の横のフィールドに「1」を入力すると、3 の場合、そのアイテムは、ドラッグされたかのように、リストの最初の場所に移動するはずです。これはできますか？

リスト全体の完全な解決策を考え出す必要はありません。項目番号を移動するフィールドが必要だとしましょう。3周。

4

3 に答える 3

1

これはどうですか: jsFiddle example .

$("#test-list").sortable({
    handle: '.big-handle',
    update: function() {
        var order = $('#test-list').sortable('serialize');
        $("#info").load("../sortable/process-sortable.php?" + order);
    }
});

$("#test-list input").blur(function() {
    var pos = $(this).val() - 1;
    if (pos >= 0 && pos <= $("#test-list li").length - 1) {
        if ($(this).parents('li').index() > pos) {
            //move up
            $(this).parents('li').insertBefore($("#test-list li:eq(" + pos + ")"));
        }
        if ($(this).parents('li').index() < pos) {
            //move down
            $(this).parents('li').insertAfter($("#test-list li:eq(" + pos + ")"));
        }
        $("#test-list input").val('');
    }
});​
于 2012-06-11T16:27:58.190 に答える
0

eq（2）メソッドはn番目に一致する要素を取得します。これを削除します。この場合、位置3（インデックス2）から、移動を要求した位置からです。DOMから削除してから、入力ボックスで指定された位置に挿入します。

//do this on blur
var index = parseInt($("input").val())
  , element = $("#test-list li").eq(2).remove();
$("#test-list li").eq(index - 1).before(element); // -1 because users like 1 based indices
于 2012-06-11T16:24:03.233 に答える
0

これを試して

​$('input').on('blur', function(){
   var $el = $(this),
   pos = $el.val(),
   $parent = $el.closest('li');

   $parent.insertBefore($('li').eq(pos));

})​​​

機能デモ： http： //jsfiddle.net/YyvjH/

ドラッグをエミュレートするトランジション効果は、CSS3で実行できます。

于 2012-06-11T16:12:28.340 に答える