web-dev-qa-db-ja.com

コンテナの外に隠されたドラッグ可能な要素

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

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

私の問題は、コンテナにposition:relative;が適用されている場合、ドラッグ可能な要素をコンテナの外側に表示できないため、ドラッグ中に要素が消えることです。コンテナの境界の外に移動したとき。

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

DOM：（各ビューはスクロール可能で、各コンテナーにはposition：relativeがあり、すべての要素を保持するために必要な大きさです）

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/

よろしくお願いします。

jquery-uijquery-ui-draggable
24
tomturton

これであなたの正確な問題が解決するかどうかはわかりませんが、同じ答えを探しているこの質問に出くわしました。これが私が見つけたものです。

.draggable（）のオプションでhelper:'clone'を渡して、アイテムのクローンを自動的に作成し、コンテナーからドラッグできるようにします。 appendTo:'body'を使用して、<body>タグの末尾に配置します。したがって、私の場合、オプションは次のようになり、revert:'invalid'を追加して、有効な場所にドロップされない場合にスプリングバックするようにします。

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

「クローン」ヘルパーを使用して、ドラッグしている間はアイテムを非表示にし、停止時に再度表示します。

$(".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();
    }
});
5
kavehmb

私は数ヶ月前に同様の問題を抱えていました。

私のニーズは、ある大きなコンテナを他のコンテナから自動スクロールできるようにすることでした

これが私の詳細です JqueryUI、大きなテーブルを含むスクロール可能なドロップ可能なdivのセルに要素をドラッグします

回避策を見つけました。ヘルパー構築コールバック中に要素のクローンをスクロール可能なコンテナーに追加し、1ミリ秒後にsetTimeout関数を使用してヘルパーを本文に追加するという考え方です。ヘルパーの位置は、オフセットの問題を回避するために、マウスの位置にマッピングする必要があります。

これが私の解決策です（JSFiddleは現在ダウンしているようですが、ウィンドウにコードが表示されていない場合は後で試してください）： 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");
        }    
    });
});​
5
sdespont

カードスタイルに位置：絶対を追加：

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