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

Question

Я использую следующий код для расширения демонстраций JQuery-UI, включенных в комплект поставки. Я пытаюсь настроить контейнер, который пользователь может перетаскивать элементы, а затем перемещать элементы внутри контейнера. Я включил ответ от When I make a draggable clone and drop it in a droppable I cannot drag it again, который работает с одной проблемой.

<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> 

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

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

Answer 1

Когда вы бросаете элемент в контейнер, вы должны проверить, добавлен ли «идентификатор» элемента droppable в контейнер.

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

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

Answer 2

Это может помочь. После того, как вы перетащите свой пункт #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); 
      } 
     })); 
    } 
});