jQuery: перетаскивание изображений внутри div с тем же классом?

Question

Я пытаюсь использовать jquery перетаскивание в моем веб-приложении и перетаскивание изображений в разных div с тем же Класс.

Но когда я перетаскиваю изображения на одно из Div, он копирует одно и то же изображение в другие div с тем же классом!

Я создал jsfiddle продемонстрировать вопрос:

http://jsfiddle.net/7nwhs3my/

и это весь мой код:

$(document).ready(function() { 

    var x = null; 

    //Make element draggable 
    $(".drag").draggable({ 

     helper: 'clone', 
     cursor: 'move', 
     tolerance: 'fit', 
     stack: '.drag', 
     revert: "invalid" 


    }); 

      $(".droppable").droppable({ 



        drop: function (e, ui) { 

        if ($(ui.draggable)[0].id != "") { 
         x = ui.helper.clone(); 
         ui.helper.remove(); 




        x.draggable({ 

         //helper: 'original', 
         containment: '.droppable', 
         tolerance: 'fit', 
         stack: '.drag' 



        }); 

        x.resizable({ 

         animate: true, 
         //aspectRatio: 16/9, 

         helper: "ui-resizable-helper", 
         handles: "n, e, s, w, nw, ne, sw,se" 

        }); 
        x.appendTo('.droppable'); 
        $("#tools").show(); 
        $("#logo").hide(); 
        $("#thumbs").show(); 

       } 

       } 

      }); 


}); 

Я также попытался использовать что-то вроде этого:

$(".droppable").this.droppable({ 

или 0:

$(".droppable").droppable[0]({ 

, но я не думаю, что я приближаюсь к нему правильно, потому что они останавливают весь мой код.

любой совет/помощь будет оценена.

Edit:

Я добавил это: $(ui.draggable).appendTo(this); в мой код, но это удалит остановить изображения от того, перетащить в состоянии после того, как они были сняты!

Answer 1

попробовать что-то вроде этого, надеемся, это больше то, что вы ищете

$(document).ready(function() { 

    var x = null; 

    //Make element draggable 
    $(".drag").draggable({ 

     helper: 'clone', 
     cursor: 'move', 
     tolerance: 'fit', 
     stack: '.drag', 
     revert: "invalid" 


    }); 

      $(".droppable").droppable({ 

        drop: function (e, ui) { 
         x = ui.helper.clone().css({position: 'absolute', left: 0, top: 0}); 
         ui.helper.remove(); 

         x.draggable({ 

         //helper: 'original', 
         containment: $(this).closest('droppable'), 
         tolerance: 'fit', 
         stack: '.drag' 



        }); 

        x.resizable({ 

         animate: true, 
         //aspectRatio: 16/9, 

         helper: "ui-resizable-helper", 
         handles: "n, e, s, w, nw, ne, sw,se" 

        }); 
        x.appendTo($(this)); 
        $("#tools").show(); 
        $("#logo").hide(); 
        $("#thumbs").show(); 

       } 



      }); 


});