25

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/

よろしくお願いします。

4

4 に答える 4

64

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

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

jQuery(".myselector").draggable({
    helper: 'clone',
    revert: 'invalid',
    appendTo: 'body'
});
于 2013-02-18T17:16:48.527 に答える
6

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

$(".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-08T00:49:30.373 に答える
5

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

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

詳細については私の質問です。JqueryUI、大きなテーブルを含むスクロール可能なドロップ可能な div のセルに要素をドラッグします

回避策を見つけました。アイデアは、ヘルパー構築コールバック中に要素のクローンをスクロール可能なコンテナーに追加し、1ms 後に 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");
        }    
    });
});​
于 2013-01-05T08:39:03.587 に答える
0

カードスタイルにposition：absoluteを追加します：

div.card {
    position:absolute;
    width:100px; height:50px;
    border:1px black solid;
    background-color:orange;
    text-align:center; vertical-align:middle;
}
于 2013-01-04T11:57:14.543 に答える