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/

现在唯一要做的就是处理将项目放在容器外的情况。当我们使用帮助器时，当拖动停止时该项目会消失。除了这个限制之外，draggables 和 droppables 在拖动时表现正确。

于 2011-06-08T00:19:15.673 回答