1

私はこれに沿ったものであるUIのアイデアを持っています：

  1. ドラッグ可能なアイテムが入った隠しコンテナがあります。
  2. ユーザーが何かをクリックして、コンテナーを表示します。
  3. ユーザーは、アイテムを収容者から「メインエリア」にドラッグできます。
  4. アイテムがコンテナからドラッグアウトされると、残りのアイテムを含むコンテナは非表示に戻る必要があります。

私は以下のコードに従って到達しました、しかし私は問題に遭遇しました、それは私が回避する方法を理解することができません。

アイテムの親コンテナが非表示になると、アイテムも非表示になります。さらに、スライド効果により、アイテムの配置も影響を受けます。

これをどのように解決できるかについての考えやアイデアは大歓迎です:)そして、私が間違った方向に進んでいる場合は、自由に正しい方向を指してください:)

よろしくお願いします、オラ

<style>
#container{ background-color: red; width:300px; height:200px; position:absolute; left: 200px; top:200px; display: none;}
#draggable1 {background-color: blue; width:100px; height:50px;}
#draggable2 {background-color: green; width:100px; height:50px;}
</style>

<div id="container">
<p>Original Container</p>
<div id="draggable1" class="draggable">
    <p>Draggable1</p>
</div>
<div id="draggable2" class="draggable">
        <p>Draggable2</p>
    </div>
</div>


<div id="showContainer">Show Container</div>

<script type="text/javascript">
    $(function () {
        //Click to show the container
        $("#showContainer").click(function () {
            //Call function to toggle the visibillity of the container
            toggleContainer();
        });

        //Set the draggable elements
        $(".draggable").draggable();

        //Set the container as a drop target, to be able to get the event of when 
        //the draggable leaves the container
        $("#container").droppable();

        //Bind to the event of the darggable element leaving the droppable area
        $("#container").bind("dropout", function (event, ui) {
            //When draggable element is dragged outside of container, hide it
            toggleContainer();
        });

        //function to toggle the visibillity of the container
        function toggleContainer() {
            //Animating the toggling of visibillity with a slide effect
            $("#container").toggle('slide', { direction: 'down' });

        };


    });

4

1 に答える 1

4

これを行う最良の方法は、アイテムがドラッグされている間にボディにアタッチされるクローンヘルパーを使用することだと思います。元のアイテムをドラッグしているような錯覚を保つために、ドラッグの開始時と停止時のアイテムの不透明度を操作できます。

$(".draggable").draggable({
    helper: 'clone', // Use a cloned helper
    appendTo: 'body', // Append helper to body so you can hide the parent
    start: function(){
        // Make the original transparent to avoid re-flowing of the elements
        // This makes the illusion of dragging the original item
        $(this).css({opacity:0});
    },
    stop: function(){
        // Show original after dragging stops
        $(this).css({opacity:1});
    }
});

デモをお試しください：http：//jsfiddle.net/HCVUd/

今やらなければならないことは、アイテムがコンテナの外にドロップされたときに処理することだけです。ヘルパーを使用しているため、ドラッグを停止するとアイテムが消えます。この制限とは別に、ドラッグ可能およびドロップ可能はドラッグ中に正しく動作します。

于 2011-06-08T00:19:15.673 に答える