18

JQuery の draggable(); を使用しています。li 要素をドラッグ可能にします。唯一の問題は、要素が親の外にドラッグされたときに表示されないことです。つまり、親 div の範囲を離れません。例は次のとおりです: http://imgur.com/N2N1L.png - 他のすべての z-index がより優先されるように見えます (そして、要素はすべての下にスライドします)。

コードは次のとおりです。

$('.photoList li').draggable({ 
        distance: 20,
        snap: theVoteBar,
        revert: true,
        containment: 'document'
    });

そして、li 要素は次のように DIV に配置されます。

<div class="coda-slider preload" id="coda-slider-1">
    <div class="panel">
        <div class="panel-wrapper">
            <h2 class="title" style="display:none;">Page 1</h2>
            <ul class="photoList">
                <li>
                    <img class="ui-widget-content" src="photos/1.jpg" style="width:100px;height:100px;" />
                </li>
            </ul>
        </div>
    </div>

問題は親コンテナーから離れないことだと確信していますが、それを取り出すために何をすべきかわかりません。

どんな指示や助けも大歓迎です!

4

5 に答える 5

21

私はまったく同じ問題でこのページにたどり着きました.Brendanの答えは私を近づけました. オプションを設定してappendToも解決しませんでしたがoverflow: visible、ドラッグ可能な要素の親に追加することで問題を解決できました。チェーンのどこかから非表示をずさんに継承していたことがわかりました。

補足ですが、jQuery UI は親に対する位置を動的に設定することでドラッグ可能な要素を移動するため、これが機能しているように見えます。これは私にとって新しい情報でした。

于 2011-06-01T16:19:11.157 に答える
12

私も同じ問題を抱えていました。
このオプションを使用できます

包含: $('#divmain')
ヘルパー: 'clone'

それぞれ for
- ドロップ アクションの制限領域を定義します
- for は、目に見えるドラッグされたオブジェクトを div の親の外側でも #divmain の内側に表示します

例

<div id="divmain">
  <div id="divparentdraggable">
    <div id="divdraggable"></div>
  </div>
  <div id="divparentdroppable">
    <div id="divdroppable"></div>
  </div>
</div>

jqueryコード:

$('divparentdraggable').draggable({ 
...
containment: $('#divmain'),
helper: 'clone',
...
});

これが誰かを助けることを願っています。

于 2013-01-31T19:47:22.897 に答える
11

上記のいくつかの組み合わせが私のためにそれをしたように見えます。

と を設定appendTo: 'body'しhelper: 'clone'ます。このようにして、新しい DOM-Object が本体の子として作成され、どこにでも表示されます。このようにして、好きな場所にドラッグ (およびドロップ) できます。

于 2014-09-26T12:54:10.623 に答える
3

これはcssの問題のようです。元に戻す機能をオフにして、半分見える位置までドラッグしても元に戻らないようにしてください。次に、Firebug で z-index などを操作して、表示されるかどうかを確認します。親の ul または div の 1 つに「overflow: hidden」が含まれている場合は、CSS の問題である可能性があります。

于 2010-04-17T13:40:09.887 に答える
2

私は同様の問題を抱えていて、オプションを設定することでそれを解決しました：

appendTo: 'body'

これに対する唯一の副作用は、親コンテナに基づいてアイテムにスタイルが適用されている場合、それらのスタイルはヘルパーに表示されないことです。

于 2011-02-15T15:54:11.273 に答える