3

物語

そのため、ボタンを押すなどのイベントで各アイテムを「固定」できるソート可能なリストを作成しようとしています。これまでのところ、次のようにしてソート可能な要素にクラスを追加するところまで来ました。

$(".test").click(function(){
  //alert($(event.target).parent("li").text());        
  $(event.target).parent("li").toggleClass("static");
});

これは、このクリック関数を各 li.free の a.test 要素にバインドすることで機能します

<ul id="sortable">
<li class="free">oranges<a href="#" class="test">click</a></li>
<li class="free">apples<a href="#" class="test">click</a></li>
<li class="free">bananas<a href="#" class="test">click</a></li>
<li class="free">pineapples<a href="#" class="test">click</a></li>
<li class="free">grapes<a href="#" class="test">click</a></li>
<li class="free">pears<a href="#" class="test">click</a></li>
<li class="free">mango<a href="#" class="test">click</a></li>
</ul>​

これにより、li の ".static" クラスが切り替えられ、ソート可能な関数がそのようにマークされたアイテムを無視できるようになります。関数の変更ハンドラーで変更を説明します。

$("#sortable").sortable({
  items: ':not(.static)',
  start: function(){
    $('.static', this).each(function(){
        var $this = $(this);
        $this.data('pos', $this.index());
    });
  },
  change: function(){
    $sortable = $(this);
    $statics = $('.static', this).detach();
    $helper = $('<li></li>').prependTo(this);
    $statics.each(function(){
        var $this = $(this);
        var target = $this.data('pos');

        $this.insertAfter($('li', $sortable).eq(target));
    });
    $helper.remove();
  }
}).disableSelection();

問題

したがって、私が抱えている問題は、最初は期待どおりに動作しますが、固定された要素を上に移動して、固定された要素をリストの下に移動することで、固定された要素を移動できることです。どんな考えでも大歓迎です。

jsFiddle

jsFiddle の例については、ここをクリックしてください。

編集！！！

そのため、さらにテストを行ったところ、別の問題が見つかりました...このスクリプトは Firefox ではまったく機能しないようです。他に移動する仕事があるので、数時間後にここに戻ってきます。アドバイスをいただければ幸いです。

4

1 に答える 1

0

次のように、クリック イベントにイベント引数を渡すだけです。

$(".test").click(function(event){
        //alert($(event.target).parent("li").text());        
        $(event.target).parent("li").toggleClass("static");
    });

これだと思います

于 2013-01-06T23:28:14.990 に答える