Laisser tomber dans un draggable avec jquery

Question

Est-il possible de déposer un div draggable dans un div déjà dropgable et droppable avec jquery? Je ne peux pas y arriver. Je serais reconnaissant si quelqu'un pouvait donner un exemple de travail.

Merci.

EDIT Ce que je ne peux pas réaliser est un div dans lequel différents divs peuvent être abandonnés et ils peuvent être triés. En outre, ces divs tombés et triables devraient également être en mesure d'accueillir à nouveau des divs triables et dropables.

EDIT Ce que je suis en train de faire du travail est à l'adresse: http://jsfiddle.net/QcbK8/

Answer 1

Que diriez-vous: threedub, construit sur jQuery.

Answer 2

simplement parce qu'un élément peut être déplacé ne signifie pas qu'il ne peut pas non plus être déposé.

J'ai écrit un petit exemple pour vous, c'est très trivial, la moitié des éléments sont drop only, les bordures rouges, la moitié sont des cibles et aussi.

Démo: http://jsfiddle.net/63kgz/1/

HTML:(quelques objets aléatoires)

<div class="drag"><span>A</span></div> 
<div class="drag"><span>B</span></div> 
<div class="drag"><span>C</span></div> 
<br class="clear" /> 
<div class="drop"><span>D</span><p></p></div> 
<div class="drop"><span>E</span><p></p></div> 
<div class="drop"><span>F</span><p></p></div> 

CSS:(ignorer cela, il est juste de montrer des objets aléatoires)

.drag { width: 100px; height: 100px; 
     float:left; margin-bottom: 10px; margin-right: 10px; 
     border:1px solid #f00; 
} 
.drop { width: 200px; height: 200px; 
     float:left; margin: 10px 10px 10px 10px; 
     border: 1px solid #000; 
} 
.drop p { width: auto; 
      color: #00f; 
      margin-left: 50%; margin-right: 50%; margin-top: 25%; margin-bottom: 25%; 
} 
.clear { clear: both; } 
div { 
    user-select: none; 
    -o-user-select:none; 
    -moz-user-select: none; 
    -khtml-user-select: none; 
    -webkit-user-select: none; 
} 

jQuery:

// Everything is draggable 
$('.drag,.drop').draggable(); 

// Only the .drop class is droppable 
$('.drop').droppable({ 
    'accept': '.drag,.drop', 
    'drop' : function(event, ui) { 
     $(this).find('p').text(ui.draggable.find('span').text()); 
    } 
}); 

// This just makes the sizes different so the objects fit in each other 
$('.drag').css('width', function(i, value) { 
    return parseInt(value) * (1/(i + 1)) + 'px'; 
}).css('height', function(i, value) { 
    return parseInt(value) * (1/(i + 1)) + 'px'; 
}); 
$('.drop').css('width', function(i, value) { 
    return parseInt(value) * (1/(i + 1)) + 'px'; 
}).css('height', function(i, value) { 
    return parseInt(value) * (1/(i + 1)) + 'px'; 
});