コンテナの外にドラッグ可能な要素が隠されています

jQuery UIを使用して、ドラッグ可能な要素を多く含む2つのスクロール可能なコンテナでインターフェイスを作成しようとしています。ユーザーはあるコンテナから別のコンテナに要素をドラッグできます。コンテナの外にドラッグ可能な要素が隠されています

ドロップ機能は問題ありません。ドロップされると、要素は分離され、新しい親の下の適切な場所に再作成されます。

私の問題は、ドラッグしながら、それがコンテナの境界の外に移動したときに、要素が消えますので、コンテナはposition:relative;は、を適用したときドラッグ可能な要素は、その容器の外に表示することができないということです。

通常、ユーザーはコンテナ内の要素をドラッグする必要があるため、このデフォルトの動作は意味があります。回避策として、私は解決策が、そのコンテナの外に要素を移動すると思ったドラッグ可能なプロパティ 'appendTo'を使用すると仮定していましたが、残念ながらこれは何の効果もなかったようです。

DOM：（各ビューは、スクロール可能であり、各コンテナが位置有する：相対して、すべての要素を保持するようにする必要があると大きい）

BODY VIEW 1 CONTAINER DRAGGABLE ELEMENTS VIEW 2 CONTAINER DRAGGABLE ELEMENTS

のJavascript：

$('div.card').draggable({ appendTo: 'body', scroll: false //stops scrolling container when moved outside boundaries });

問題の簡単な説明については、JSFiddleを参照してください。私はドロップ可能なコードを使ってサンプルを膨らませたくないので、これはドラッグの問題を示しています。 http://jsfiddle.net/Em7Ak/

事前に感謝します。カードスタイルに絶対：：

出典

2013-01-04 tomturton

、：ここで

は（JSFiddleは現在ダウンしているようだ何のコードがウィンドウに表示されていない場合は、後でそれを試してみてください）私の解決策でありますしかし、私はこの質問に出会い、同じ答えを探していました。これが私が見つけたものです。

.draggable（）のオプションでは、helper:'clone'を渡してアイテムのクローンを自動的に作成し、コンテナからドラッグできるようにします。 <body>タグの最後にはappendTo:'body'を付けてください。だから、私の場合には、私のオプションは、それがどこかに有効で落とされていない場合、それはスプリングバックさせるrevert:'invalid'に追加して、多少のようになります。

jQuery(".myselector").draggable({ 
    helper: 'clone', 
    revert: 'invalid', 
    appendTo: 'body' 
});

出典

2013-02-18 17:16:48 Paul

ヘルパー： 'クローン'は、ドラッグ可能な項目が親の境界の外にドラッグされたときに表示されない状況の場合、私のために機能します。 – Katat

あなたのappendTo： 'body'部分が欠けているように聞こえます。 –

ありがとうございました。<3、保存しました。 –

はポジションを追加

div.card { 
    position:absolute; 
    width:100px; height:50px; 
    border:1px black solid; 
    background-color:orange; 
    text-align:center; vertical-align:middle; 
}

出典

2013-01-04 11:57:14 Saram

ありがとうございます。これは、それぞれのコンテナに対して相対位置を適用するまで機能します。私はユーザーがパターンで読み込むことができるので、このプロパティを使用する必要があります。私はそれに応じて私の質問とJSFiddleを変更しました。 – tomturton

私はいくつかのヶ月前に同様の問題がありました。

私の必要性はここで他の人から

を一つの大きなコンテナの自動スクロールを使用することができるようになった詳細は、私の質問は、私は回避策を見つけ、JqueryUI, drag elements into cells of a scrolling dropable div containing large table

です。アイデアは、ヘルパー構築コールバック中にスクロール可能なコンテナに要素のクローンを追加し、1ms後にsetTimeout関数を使用してヘルパーを本文に追加することです。ヘルパーの位置は、オフセットの問題を避けるために、マウスの位置にマップする必要があります。私はこれがあなたの正確な問題を解決するかどうかはわからないhttp://jsfiddle.net/QvRjL/134/

$('[id^="drag-"]').each(function() { 
    $(this).draggable({ 
     opacity: 0.7, 
     cursorAt: { top: 15, left: 50 }, 
     appendTo: 'body', 
     containment: 'body',   
     scroll: true, 
     helper: function(){ 
      //Hack to append the cartridge to the body (visible above others divs), 
      //but still belonging to the scrollable container 
      $('#container').append('<div id="clone" class="cartridge">' + $(this).html() + '</div>'); 
      $("#clone").hide(); 
      setTimeout(function(){ 
       $('#clone').appendTo('body'); 
       $("#clone").show(); 
      },1); 
      return $("#clone"); 
     }  
    }); 
});

出典

2013-01-05 08:39:03 sdespont

「クローン」ヘルパーを使用して、それをドラッグ中にアイテムを隠します停止して再び表示します。

$(".removalbe-recom").draggable({ 
    appendTo: "body", 
    helper: "clone", 
    revert: "invalid", 
    cursor: "move", 
    containment: "document", 
    zIndex: 10000, 
    scroll:false, 
    start: function (event, ui) { 
    $(this).hide(); 
    }, 
    stop: function (event, ui) { 
     $(this).show(); 
    } 
});

出典

2015-10-08 00:49:30 kavehmb

コンテナの外にドラッグ可能な要素が隠されています

答えて

関連する問題