Drag n Drop с использованием jQuery UI

Question

Я использую jQuery UI для drag n drop.

JsFiddle here

<div id="draggable" class="ui-widget-content"> 
    <div id="" class="draggables"> 
     <label>Text Input</label> 
     <input type="text" name="textinput" /> 
    </div> 

    <div id="" class="draggables"> 
     <label>File Upload</label> 
     <input type="file" name="fileinput" /> 
    </div> 

    <div id="" class="draggables"> 
     <label>Textarea Input</label> 
     <textarea rows="3" cols="20" name="textareainput" ></textarea> 
    </div> 
</div> 

<div id="sortable" class="ui-widget-content"> 
    <p></p> 
</div> 

Обратите внимание, что здесь draggable и sortable являются идентификатор DIV

Я использую клон для перетаскивания из draggable и упасть в sortable. Теперь я хочу, чтобы, когда сопротивление от sortable и падения в draggable этот элемент уничтожить без каких-либо изменений draggable элемента означает, 3 DIV из draggable будет оставаться таким же, но если draggable падение элемент в draggable чем 3 DIV не будет оставаться таким же

Я знаю, это происходит потому, что im использует событие drop. как решить эту проблему

Answer 1

Получил решение В пользовательском интерфейсе Droppable jQuery существует метод, позволяющий использовать эту проблему для решения этой проблемы.

$(function() { 

    $("#sortable").droppable({ 
    drop: function(event, ui) { 
     ui.draggable.addClass("droppables"); //using this add class 
    } 
    }); 
    $('#draggable').droppable({ 
     accept: ".droppables", // using this which draggable elements are accepted by the droppable. 
     drop: function(event, ui) { 
      ui.draggable.remove(); 
     } 
    }); 

}); 

взгляд на jsFiddle here