0

複数のソータブルがあり、互いに重なり合う可能性があります。Sortable は互いに接続されており、要素を別の要素にドラッグできます。また、これらの sortables にドラッグできる他のアイテムもあります。

プレースホルダーが完全に別のプレースホルダーの上にあるとき、私はトリッキーな部分を持っていました。これにより、要素を外側のコンテナーから内側のコンテナーにドロップできなくなりました。ソート可能なウィジェットを拡張し、コンテインメントではなく z-index をチェックするように少し変更しました。

if (innermostContainer && $.contains(this.containers[i].element[0],innermostContainer.element[0])){

に変更:

if (innermostContainer && parseInt(this.containers[i].element.css('zIndex')) < parseInt(innermostContainer.element.css('zIndex'))){

この問題にはうまく機能します。

次の問題は、アイテムをドラッグ可能なアイテムから内側のコンテナーにドラッグ アンド ドロップすると、2 つのプレースホルダーが表示され、両方をエラーで追加しようとすることです。

(以前の z-index 修正が適用されていない場合、ドラッグされたアイテムは内側のコンテナーに追加され、他のコンテナーにも追加されます) したがって、主に私の修正では、外側のコンテナーのアイテムが内側のコンテナーに配置されます。

どちらの効果も私にとっては悪いことですが、プレースホルダーとアイテムを 1 つだけ追加して、これを修正したいと思います。

どうすればいいのか解決策はありますか？

問題を示す例を作成しました: http://jsbin.com/irigas/1/edit

4

1 に答える 1

0

そのため、何時間もかかりましたが、解決策を見つけることができました。解決策として共有します。

ドラッグ時に不要なアイテムを取得するダミーのソート可能オブジェクトを作成しました。

var dummy = $('#dummy');
  dummy.testSortable({
   items: '.item', 
   helper: "clone",
   tolerance: "pointer",
   appendTo: 'body'
  });
  window.dummySortable = dummy.data('sortable'); //this data key depends on the actual jQuery ui version

また、後で確認する必要があるため、ドラッグの開始イベントと終了イベントをグローバルにマークする必要があります。

start: function() {
    window.isdrag = true;

},
stop: function() {
    window.isdrag = false;
}

次に、以前に拡張されたメソッドで、これを追加する必要があります。

if (innermostContainer && parseInt(this.containers[i].element.css('zIndex')) < parseInt(innermostContainer.element.css('zIndex'))) {
    if(window.isdrag){
        innermostContainer = window.dummySortable;
        innermostIndex = this.containers.indexOf(innermostContainer);
    }
    continue;
}

これにより、ドラッグ時に不要な要素がフィルタリングされ、ダミーのソート可能オブジェクトに送信されます。後ろに緑色の背景が見えますが、これはダミーのソート可能です。

リビジョン #2 をソリューションでテスト: http://jsbin.com/irigas/2/

このハッキーなソリューションについてご不明な点がありましたら、お気軽に共有してください。これを改善できるかどうか知りたいです。

于 2013-04-26T09:12:26.300 に答える