5

別の空の < ul > 要素にドラッグできる < li > 要素のドラッグ可能なリストがあります。ドラッグ可能な元の < ul > の最初の < li > 要素をドラッグすると、すべて正常に動作します...

問題：

...しかし、そのリストの他の < li > 要素をドラッグすると、受信しているソート可能な < ul > の境界を越えるとすぐに、「ヘルパー」がマウス ポインターから離れます。より正確には、リストの一番上に移動します。

誰もこれを見て、解決策を知っていますか? まあ、私の問題は、私はjqueryを使用しているだけで、あまり深くは使用しておらず、javascriptを深く使用したこともありません。

問題に関する詳細情報:

私のjQueryコード:

$(document).ready(function() {
    $('#roleList > li').draggable({
        connectToSortable: '#roleDrop',
        containment: '#container',
        revert: 'invalid'
    });                   
    $('#roleDrop').sortable({
        cursor: 'move',
        containment: '#container',
        revert: true,
        update: function() {
            var order = $('#roleDrop').sortable('serialize');
            $.ajax({
                type: 'POST',
                url: '".$postUrl."',
                dataType: 'html',
                data: order
            });
        }                          
    });
    $('#roleList').disableSelection();
});

#roleList と #roleDrop は前述の順序付けられていないリストですが、#container はテーブルです。

今何が起こるかのスクリーンショット。

アイテムのドラッグを開始します。

http://drop.io/download/public/dkabw5hlq3yfm0f84yji/7bf91122adc241373a5da13b5bde4b231644c1c5/da142000-ff76-012b-41ee-f10bc9db08a6/5a1bfa70-68f6-012c-6d08-f206umav3/f206umav3/ラージ

2 番目の <ul> の境界を越えると、ヘルパーがジャンプします。

http://drop.io/download/public/dkabw5hlq3yfm0f84yji/2fad1d633d38cf593da46c638d1930431ea5fd35/da142000-ff76-012b-41ee-f10bc9db08a6/5c65c4c0-68f6-012c-6601-f12dum7d/大規模な

xhtml マークアップも必要な場合はお知らせください。

4

1 に答える 1

9

オプションに追加helper: 'clone'してみてください：.draggable

$('#roleList > li').draggable({
    helper: 'clone',
    connectToSortable: '#roleDrop',
    containment: '#container',
    revert: 'invalid'
});

jQuery documentationによると、ドラッグ可能なものをソート可能なものに接続するときに、このオプションを設定する必要があります。

これにより、異なるインターフェイス エクスペリエンスが得られますが (ドラッグされた項目は移動ではなく複製されます)、ドキュメントが示唆する既知の問題に対する少なくとも一時的な回避策です。追加のイベント処理により、更新コールバック#roleList中に元のアイテムが消去される可能性があります。#roleDrop

于 2009-08-13T03:56:53.860 に答える