2011-12-14 41 views
1

可能性の重複:
Drag and Drop between Multiple Lists and SortablejQueryの1.7 UI 1.8、ドラッグ可能なドロップ可能とソート可能な共存

私は、それぞれの要素を含む2つのボックスを持っていると思います。私はこのコードを持っている(彼らは新しい仲間だとソートすることができるようになる場所)これらの要素は、他の容器に並べ替え可能とドラッグ可能であることを

が欲しい: http://jsfiddle.net/Q63nc/

をそれがいるようです「ソート可能な」プロパティは取得されません。さらに、青いボックスを移動すると、もうドラッグできなくなります。なぜこれ?

ご利用いただきありがとうございます。

答えて

0

with sortableの問題は、間違ったクラスを指定していたことです。リスト内の項目ではなく、リストを選択する必要があります。

必要な機能をご利用いただくには、the sortable connectWith propertyをご確認ください。

connectWithオプションの説明:

もsortablesが適用されているアイテムとjQueryのセレクタをとり。これを使用すると、ソート可能なアイテムが他の一方向アイテムに接続されるようになりました。このソート可能アイテムから別のアイテムにドラッグできます。

ここでは、それが働いていることを示す新しいフィドルです - http://jsfiddle.net/huWYN/

$(function(){ 
    $("#left-side, #right-side") 
     .sortable({ 
      axis: "x", 
      connectWith: ".droppable" 
     }) 
     .disableSelection(); 
}); 

私はあなたの周りにそれらを移動している間、あなたが誤ってリストで物事をHILIGHTませんdisableSelectionを追加しました。経験をよりスムーズにするだけです。両方のリストが入っているコンテナ全体に対してこれを行うことができます。

disableSelectionはまだ文書化されていませんが、the jQuery UI Core as of 1.7の一部です。 this thread post on the functionから

これは、テキスト要素、または テキストではなく、テキスト選択が含まれている要素を製造するのに有用です。たとえば、ドラッグ可能な要素がある場合、 は、ユーザーが要素をドラッグするとテキスト選択が行われないようにすることができます。

+0

うわー、私はそれが簡単だとは思えません! しかし、私は好奇心があります: "connectWith"は何をしますか? –

+0

私はそれを説明するデモにリンクしました。下の 'options'タグをクリックしてください。私は答えにその情報を追加します。 –