Question

我对UI有一个想法，就像这样：

有一个带有可拖动项目的隐藏容器。
用户点击某些内容以显示容器。
用户可以将项目从ontainer拖出到“主要区域”。
当一个项目从容器中拖出时，包含其余项目的容器应该返回隐藏状态。

我已经达到了下面的代码，但是我遇到了一个问题，我无法解决这个问题。

当项目的父容器被隐藏时，项目也会被隐藏。再加上滑动效果，物品的定位也会受到影响。

关于如何解决这个问题的任何想法或想法都会受到欢迎:) 如果我走错了轨道，请随意指出正确的方向：）

提前致谢，奥拉

<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' });

        };


    });

Answer 1

我认为最好的方法是使用克隆的助手，在拖动项目时将其附加到身体上。为了保持拖动原始项目的错觉，您可以在拖动开始和停止时使用项目的不透明度。

$(".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/

现在唯一要做的就是处理物品落在容器外面的时间。当我们使用帮助器时，拖动停止时项目会消失。除此限制外，拖动时拖动和拖放行为正确。

jQuery UI，draggable - 隐藏父级时的位置问题

1 个答案: