JQuery-UI Перетаскивание, перетаскивание и повторное перетаскивание клонов при повторном перетаскивании. - PullRequest
Новая
       16

JQuery-UI Перетаскивание, перетаскивание и повторное перетаскивание клонов при повторном перетаскивании.

0 голосов
/ 21 февраля 2010

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

<script>
$(document).ready(function() {
    $("#droppable").droppable({
        accept: '.ui-widget-content',
        drop: function(event, ui) {
        if($(ui).parent(":not(:has(#id1))")){
            $(this).append($(ui.helper).clone().attr("id", "id1"));
        }
            $("#id1").draggable({
                containment: 'parent',
            });
        }
    }); 
    $(".ui-widget-content").draggable({helper: 'clone'});
});
</script>

div class="demo">

<div id="draggable" class="ui-widget-content">
    <p>Drag me around</p>
</div>

<div id="droppable" class="ui-widget-header">
    <p>Drop here</p>
</div>

Когда предмет сбрасывается в контейнер с предметами для выпадения, его можно перетаскивать один раз, а когда его отбрасывают после перетаскивания, он теряет способность перетаскивать.

Как разрешить перетаскивание элемента несколько раз после его добавления в контейнер для отбрасывания?

Ответы [ 2 ]

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

Это может помочь. После того как вы перетащите элемент #draggable в контейнер #droppable, элемент в #droppable снова должен быть перетаскиваемым. Вот код для этого: 

$(document).ready(function () {
    $('#bus #seat').live('dblclick', function (event) {
        $(this).remove();
    });
});

$(function () {
    var i = 0;
    var element;
    $('#draggable').draggable({
        containment: '.main',
        cursor: 'move',
        helper: 'clone',
        revert: 'invalid',
        //snap: '#droppable'
    });

    $('#droppable').droppable({
        accept: ".ui-widget-content",
        drop: handleDropEvent
    });

    function handleDropEvent(event, ui) {
        //i++;
        element = ui.helper.attr('id') + i;
        var offsetXPos = parseInt(ui.offset.left);
        var offsetYPos = parseInt(ui.offset.top);
        alert('Drag Stopped!\n\nOffset:(' + offsetXPos + "'" + offsetYPos + ')\n' + element);
        $(this).find('#droppable').remove();
        $(this).append($(ui.helper).clone().draggable({
            containment: '#droppable',
            cursor: 'move',
            snap: '#droppable',
            stop: function (event, ui) {
                alert(element);
            }
        }));
    }
});
1 голос
/ 21 февраля 2010

Когда вы опускаете элемент в контейнер, вы должны проверить, не добавлен ли в контейнер "id" элемента сбрасываемого элемента.

Взгляните на следующий пример:

http://highoncoding.com/Articles/381_Drag_And_Drop_With_Persistence_Using_JQuery.aspx

...