как сделать перетаскиваемый элемент droppable снова

Question

Я использую JQuery UI и создаю функцию перетаскивания. У меня есть элемент div, который можно перетаскивать, а затем, когда он перетаскивается, пользователь может добавлять изображения к этому элементу divged div. Это мой код.

$("#dvSource img").draggable({ 

     //containment: '#gbox', 
     cursor: 'move', 
     helper: 'clone', 
     scroll: false, 
     connectToSortable: '#edit, #edit1, #mainContentDiv' , 
     //appendTo: '#edit', 
     start: function() {}, 
     stop: function (event, ui) {} 
    }).mousedown(function() {}); 



$("#edit1").draggable({ 
     cursor: 'move', 
     helper: 'clone', 
     scroll: false, 
     connectToSortable: '#mainContentDiv', 
     //appendTo: '#droppable', 
     start: function() {$(this).addClass("droppedDiv"); }, 
     stop: function (event, ui) {} 
    }).mousedown(function() {}); 



$("#mainContentDiv").droppable({ 

    accept: "#edit1", 
     drop: function(event, ui) { 
    ui.draggable.attr("id","draggeddd"); 
    $("#mainContentDiv").append(ui.draggable); 
    //$(this).addClass("ui-state-highlight"); 
     } 
    }); 



$("#draggeddd").droppable({ 

    accept: "#dvSource img", 
     drop: function(event, ui) { 
    alert("fial drop"); 
    //$(".droppedDiv").append(ui.draggable); 
    $("#draggeddd").append(ui.draggable); 
     } 
    }); 

edit1 - это DIV, который перетаскивается и помещается в mainContentDiv. Эта часть работает нормально. Но когда я пытаюсь добавить место изображения в #dvSource img к этому отброшенному DIV, он этого не делает.

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

Answer 1

Проблема заключается в том, что вы делаете #draggeddd Droppable в то время, когда он не нашел, потому что вы меняете идентификатор из #edit1 в #draggedddin в drop из #mainContentDiv. Это приводит к тому, что #draggeddd никогда не отбрасывается.

Решение сделать #draggeddd Droppable после изменения идентификатора, например:

$("#mainContentDiv").droppable({ 
    accept: "#edit1", 
    drop: function(event, ui) { 
     ui.draggable.attr("id","draggeddd"); 
     $("#mainContentDiv").append(ui.draggable); 
     //$(this).addClass("ui-state-highlight"); 

     $("#draggeddd").droppable({ 
      accept: "#dvSource img", 
      drop: function(event, ui) { 
       alert("fial drop"); 
       //$(".droppedDiv").append(ui.draggable); 
       $("#draggeddd").append(ui.draggable); 
      } 
     }); 
    } 
});