8

アコーディオンウィジェット内にドラッグ可能なオブジェクトがあります。ドラッグすると、その親であるアコーディオン要素が拘束されます。「封じ込め」オプションを使用しようとしましたが、成功しませんでした。

私はFireFox3.5.5とChromium4でこれを試しました。

それを解決する方法はありますか？

ありがとう

4

5 に答える 5

9

完全な例をお探しの方は、jQueryUIデモのショッピングカートの例をご覧ください。これはドロップ可能な例ですが、質問された内容を正確に示しています（アコーディオンの外側に要素をドラッグする）。

$(function() {
        $( "#catalog" ).accordion();
        $( "#catalog li" ).draggable({
            appendTo: "body",
            helper: "clone"
        });
});

そしてそこから続けます。

于 2012-02-24T21:41:05.590 に答える
5

私の答えはソータブルに当てはまります。ドラッグアブルも同様である必要があると思います。デフォルトの「original」の代わりに「clone」を使用し、appendTo：「body」を使用することで、これを機能させることができました。originalをヘルパーとして使用すると、appendTo：'body'を設定した場合に必要だと思われる場合でも、ヘルパーが本体に追加されていないように見えるため、奇妙です。私はあなたがそれを動かすことができることを願っています！

于 2010-02-18T21:00:01.883 に答える
3

試す

$（ ".selector"）.draggable（{appendTo：'body'}）;

于 2010-09-01T13:17:54.803 に答える
1

'document'の包含値を使用してみましたか：

$("#draggable1").draggable({ containment: 'document' });

これが私がアコーディオンの外にドラッグできた例です：

<div id="accordion">
    <h3><a href="#">Section 1</a></h3>
    <div id="draggable1">
    <p>
        Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
        ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
        amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
        odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
    </p>
    </div>
    <h3><a href="#">Section 2</a></h3>
    <div>
        <p>
        Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
        purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
        velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
        suscipit faucibus urna.
        </p>
    </div>
</div>

<script type="text/javascript">
$(function() {
    $("#accordion").accordion();
    $("#draggable1").draggable({ containment: 'document' });
});
</script>
于 2009-12-01T17:14:21.177 に答える
0

アコーディオンコンテナのオーバーフローモードが非表示に設定されているため、jQueryアコーディオンの外にアイテムをドラッグすることはできません。

1）オーバーフローを（インラインスタイルオーバーライドによって）可視に設定してみることができますが、その場合、アコーディオン自体が機能しなくなる可能性があります。

<div id="simpleAccordion" style="overflow: visible;">

 <h3>Header 1<h3>
 <div>...</div>

 <h3>Header 2<h3>
 <div>...</div>

 <h3>Header 3<h3>
 <div>...</div>

</div>
于 2012-08-01T10:26:44.097 に答える