Glisser et déposer: Ajout de draggable à droppable

Question

J'ai un projet http://jsfiddle.net/x5T4h/566/.

html:

<div class="dropable base"> 
    <div class="draggable">Div1</div> 
    <div class="draggable">Div2</div> 
    <div class="draggable">Div3</div> 
    <div class="draggable">Div4</div> 
</div> 

<div class="places"> 
    <div class="droppable">Move here div</div> 
    <div class="droppable">Move here div</div> 
    <div class="droppable">Move here div</div> 
    <div class="droppable">Move here div</div> 
</div> 

jQuery UI:

$('.droppable').droppable({ tolerance: "touch" }); 
$('.draggable').draggable({ revert: "invalid" }); 
$('.base').droppable(); 

Je veux:

1. Faire draggable joint à largable quand il est tombé. J'ai essayé de utiliser l'aide et la fonction d'appendTo, mais cela ne fonctionne pas de cette façon que je recherchais . Je veux faire glisser dropgable la même position et même taille que ce droppable (sauf classe .base). Il devrait ressembler à la draggable sur le droppable au même moment. J'ai tout essayé.

2. Un seul dérapage peut être déposé sur une seule goutte.

J'ai tout essayé, mais cela ne fonctionnait toujours pas comme prévu.

Answer 1

Il y a beaucoup de façons de faire cela et ce n'est pas tout à fait clair ce que vous cherchez dans votre question. Voici ma suggestion.

Exemple de travail: http://jsfiddle.net/Twisty/x5T4h/568/

JavaScript

$(function() { 
    $('.droppable').droppable({ 
    tolerance: "touch", 
    drop: function(e, ui) { 
     $(this).append(ui.draggable); 
     $(this).find(".draggable").css({ 
     position: "absolute", 
     top: 0, 
     left: 0, 
     margin: "-1px", 
     width: $(this).width() + "px" 
     }); 
     $(e.target).droppable("disable"); 
    } 
    }); 
    $('.draggable').draggable({ 
    revert: "invalid", 
    zIndex: 1000 
    }); 
    $('.base').droppable(); 
}); 

espoir qui aide.