jQuery sürüklenebilir + bırakılabilir - sürüklenen öğeyi fiziksel olarak düşürülmüş konteynere taşıyın

Question

Bu işleve, sürüklenebilen ve fiziksel olarak bu öğeyi, geçerli işlevin yaptığı gibi yalnızca üzerine gelmek yerine konteynere hareket ettirebilmem gerekiyor. Örneğin bu şekilde

:

görüntü sürüklenip 'konteyner' Orada Taşınacak gerçek html elemanı ihtiyaç div içine düşmüş Yani sonra

<div class="container"></div> 
<div class="image"> 
    <img class="thumb" src="images/Koala.jpg" alt="" /> 
</div> 

$(function() { 
    $(".image").draggable(); 
    $(".container").droppable({ 
     drop: function (event, ui) { 
      alert('dropped!'); 
     } 
    }); 
}); 

. Olay meydana geldikten sonra ben Chrome'un dev araçlarını kullanarak kaynağına bakmak olsaydı

Yani, görecekti:

<div class="container"> 
    <div class="image"> 
     <img class="thumb" src="images/Koala.jpg" alt="" /> 
    </div> 
</div> 

bu mümkün mü?

Teşekkür

damla fonksiyonunda

Answer 1

Bu sürüklenebilir elemanı hareket etmelidir dom ağacında düşmüş olabilir.

drop: function (event, ui) { 
    $(this).append(ui.draggable); 
} 

Answer 2

, $(this), yani sadece droppable için sürüklenebilir eklemek için .append() kullanmak sürüklenebilir kabul droppable geçerli: http://jsfiddle.net/saluce/P6TjC/

$(function() { 
    $(".image").draggable({helper: 'original'}); 
    $(".container").droppable({ 
     drop: function (event, ui) { 
      $(this).append(ui.draggable.css({position: 'static'})); 
      alert('dropped!'); 
     } 
    }); 
});​