Bonjour !

Voilà mon soucis : je suis en train de créer un petit script JS pour quelques tests avec jQuery. Or je me heurte à un problème, c'est que je ne sais pas comment faire pour draggé un élément déjà draggé.

J'ai essayé $('zone-2').droppable('refresh');, mais cela ne fait rien .

Voilà mon code :

$(function(){
	var draft = {
		'1' : 'cartes/1.jpg',
		'2' : 'cartes/2.jpg',
		'3' : 'cartes/3.jpg',
		'4' : 'cartes/4.jpg'
	};
	var deck = {};
	
	$('#draft li, #deck li').draggable({
			revert: "invalid",
			containment: "document",
		});
		
	$('#zone-1, #zone-2').droppable({
			accept: "#draft > li, #deck > li",
			drop: function(event, ui) {
				var $zone = $(this); // Objet jQuery représentant la zone où la carte est droppée
				var $li_card = ui.draggable; // Objet jQuery représentant la "li" de la carte
				
				if($zone.attr('id') == 'zone-2')
				{
					var url = 'cartes/'+$li_card.attr('id')+'.jpg';
				
					delete draft[$li_card.attr('id')];
					deck[$li_card.attr('id')] = url;
					
					$li_card.fadeOut(500, function() { $(this).remove(); });
					
					$('#deck').html($('#deck').html()+'<li><img src="'+url+'" /></li>');
					
					$('zone-2').droppable('refresh');
				}
			}
		});
	
	$('img').mouseup(function() {
		$(this).css('cursor', 'url(cursor_drop_hand.png), auto');
	}).mousedown(function() {
		$(this).css('cursor', 'url(cursor_drag_hand.png), auto');
	});
});

Mon HTML est simple, juste deux listes dans deux div :

<div id="zone-1" class="not-highlight">
	<h3>Votre draft</h3>
	<ul id="draft">
		<li class="ui-state-default" id="1"><img src="cartes/1.jpg" /></li>
		<li class="ui-state-default" id="2"><img src="cartes/2.jpg" /></li>
		<li class="ui-state-default" id="3"><img src="cartes/3.jpg" /></li>
		<li class="ui-state-default" id="4"><img src="cartes/4.jpg" /></li>
	</ul>
</div>
<div id="zone-2" class="not-highlight">
	<h3>Votre deck</h3>
	<ul id="deck">
	</ul>
</div>

Merci, et a+ !