Jquery Sortable - 必須項目とオプション項目

Question

私は2つのリストを持つページを持っています。左のリストには「オプション」の項目がいくつかあります。右側のリストは、必要な項目があらかじめ入力されるメインリストです。

ユーザーは、2つのリストの間でオプションのアイテムを前後にドラッグしたり、どちらのリストでも並べ替えることができます。

ユーザーはメインリストアイテム（必須およびオプションの両方）を並べ替えることができますが、必要なアイテムをオプションリストにドラッグできないようにすべきです。

これは意味がありますか？ これを達成する最も良い方法は何ですか？

私はjqueryソートでこれを行うさまざまな方法を試しましたが、それを正しく得ることはできません。 何か助けていただければ幸いです。

例リスト：

<div id="Selector"> 
<ul id="OptionalFields" class='droptrue'> 
    <li class="ui-state-highlight, optional">Optional 1</li> 
    <li class="ui-state-highlight, optional">Optional 2</li> 
    <li class="ui-state-highlight, optional">Optional 3</li> 
    <li class="ui-state-highlight, optional">Optional 4</li> 
</ul> 
<ul id="FileFields" class='droptrue'> 
    <li class="ui-state-default, required">Required 1</li> 
    <li class="ui-state-default, required">Required 2</li> 
    <li class="ui-state-default, required">Required 3</li> 
</ul> 

は現在、私のスクリプトは次のようになります。

$(function() { 
    $("#OptionalFields").sortable({ 
     containment: '#Selector', 
     tolerance: 'pointer', 
     connectWith: '#FileFields', 
     cursor: 'pointer', 
     revert: 'true', 
     opacity: 0.6, 
     receive: function() { 
      if ($(this).hasClass("required")){ return false}; 
     } 

    }); 

    $("#FileFields").sortable({ 
     containment: '#Selector', 
     tolerance: 'pointer', 
     connectWith: '#OptionalFields', 
     cursor: 'pointer', 
     revert: 'true', 
     opacity: 0.6, 
     update: function() { 
      //alert('sorted'); 
     } 
    }); 
}); 

おかげで、 トニー

はタイプ/構文エラーを編集しました。

Answer 1

がOK、解決策を見つけましたキャンセル。 これでドロップがキャンセルされます。 これをきれいにしましょう。 =）

また、リスト項目に指定したクラスをカンマを削除して修正しました。

Answer 2

はレギュラーJSです。 hasClass()はjQuery関数なので、thisには適用されません。

この代わりに（しゃれ）を試してみてくださいません：$(this).hasClass('required')デモ

：

$(function() { 
    $("#OptionalFields").sortable({ 
     containment: '#Selector', 
     tolerance: 'pointer', 
     connectWith: '#FileFields', 
     cursor: 'pointer', 
     revert: 'true', 
     opacity: 0.6, 
     receive: function (event, ui) { 
      if (ui.item.hasClass('required')) { 
       $(ui.sender).sortable('cancel'); 
      }; 
     } 

    }); 

    $("#FileFields").sortable({ 
     containment: '#Selector', 
     tolerance: 'pointer', 
     connectWith: '#OptionalFields', 
     cursor: 'pointer', 
     revert: 'true', 
     opacity: 0.6, 
     update: function() { 
      //alert('sorted'); 
     } 
    }); 

お知らせ受信イベントへの変更やIどのように変更しますhttp://jsfiddle.net/2QMur/