jQuery UI, draggable - проблема положения при сокрытии родителя - PullRequest
Новая
       2

jQuery UI, draggable - проблема положения при сокрытии родителя

1 голос
/ 08 июня 2011

У меня есть идея для пользовательского интерфейса, которая выглядит примерно так:

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

        };


    });

1 Ответ

3 голосов
/ 08 июня 2011

Я думаю, что лучший способ сделать это - использовать клонированного помощника, который прикрепляется к телу, пока предмет перетаскивается. Чтобы сохранить иллюзию перетаскивания оригинального элемента, вы можете играть с непрозрачностью элемента, когда перетаскивание начинается и заканчивается. 

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

Единственное, что осталось сделать сейчас - это обработать, когда предмет выпадает за пределы контейнера. Поскольку мы используем помощника, элемент исчезает, когда перетаскивание прекращается. Помимо этого ограничения, перетаскиваемые и сбрасываемые объекты ведут себя правильно при перетаскивании.

...