jQuery UI sürüklenebilir ve droppable yinelenen sorunu

Question

Hey aşağıdaki jQuery Draggale/droppable UI ile sorunlar yaşıyorum hepsi:

JSFIDDLE

Sadece iyi çalışır zaman ilk sürükle müthiş metin içine pdfCanvas div. Birincisinden sonra, harika metnini pdfCanvas içine tekrar sürüklediğinizde, ilk kez yaptığınız gibi bir kez yerine iki kez kopyalar.

Ayrıca bunu orada şu anda var müthiş metnin tüm hamle pdfCanvas içeride bir müthiş metni taşımak çalıştığınızda.

JS: Birinin görmek ve bu sorunu gidermek için nasıl bir düzeltme biliyorsa

$(".resize-drag").draggable({ 
    helper: 'clone', 
    cursor: 'move', 
    revert: true, 
    grid: [5, 5] 
}); 

$("#pdfCanvas").droppable({ 
    accept: '.resize-drag', 
    drop: function(e, ui) { 
    if ($(ui.draggable)[0].id != "") { 
     x = ui.helper.clone(); 
     ui.helper.remove(); 
     x.draggable({ 
     helper: 'original', 
     cursor: 'move', 
     drop: function(event, ui) { 
      $(ui.draggable).remove(); 
     } 
     }); 

     x.appendTo('.resize-drag'); 
    } 
    } 
}); 

harika olurdu!

Answer 1

Tamam, sorun, yeni klonunuzu yeniden boyutlandırma-sürüklemesine eklediğinizdir. Böylece, klonlandığınız nesnenin içindeki yeni nesneleri içerirsiniz.

Çalıştığını görmeniz için yeni bir JSFiddle oluşturdum. Doğru pozisyonu almak için ufak bir ayar yapmaya ihtiyacı var. Ama umarım bu size doğru yönde işaret eder.

JSFiddle

$("#pdfCanvas").droppable({ 
    accept: '.resize-drag', 
    drop: function(e, ui) { 
    if ($(ui.draggable)[0].id != "") { 
     var clone = ui.draggable.clone(false); 
     clone.css('left', ui.offset.left) 
      .css('top', ui.offset.top) 
      .css('position', 'absolute') 
      .removeClass('ui-draggable ui-draggable-dragging resize-drag') 
      .addClass('dropped-element'); 
     $('#pdfCanvas').append(clone); 
     $(clone).draggable({ 
     containment: 'parent' 
     }); 
    } 
    } 
}); 

function addDraggable(){ 
    $(".resize-drag").draggable({ 
    helper: 'clone', 
    cursor: 'move', 
    revert: true, 
    grid: [5, 5] 
    }); 
} 

addDraggable(); 

Answer 2

kontrol my trial in JSFiddle. Bence sana yardım edecek.

$(".resize-drag").draggable({ 
    helper: 'clone', 
    cursor: 'move', 
    connectToSortable: "#pdfCanvas", 
    revert: 'invalid', 
    cursor: 'move', 
    grid: [5, 5] 
}); 

$("#pdfCanvas").sortable({ 
items: '.resize-drag', 
connectWith: '#pdfCanvas', 

});