HTML:
<div class="character_list">
<div id="draggable" class="character_list_container">
<div><img class="1" src="http://ahna.web44.net//img/charas/13.png" /></div>
<div><img class="2" src="http://ahna.web44.net//img/charas/13.png" /></div>
<div><img class="3" src="http://ahna.web44.net//img/charas/13.png" /></div>
<div><img class="4" src="http://ahna.web44.net//img/charas/13.png" /></div>
<div><img class="5" src="http://ahna.web44.net//img/charas/13.png" /></div>
<div><img class="6" src="http://ahna.web44.net//img/charas/13.png" /></div>
</div>
<div id="droppable_slots" class="current_team">
<div id="slot" class="1">1</div>
<div id="slot" class="2">2</div>
<div id="slot" class="3">3</div>
</div>
</div>
jQuery:
$(function() {
$("#draggable>div>img").draggable({
start: function(){
$(this).css({display: 'none'});
},
stop: function(){
$(this).css({display: 'block'});
},
revert: function(dropped) {
var dropped = dropped && dropped[0].id== "slot";
if(!dropped) {
$(this).appendTo($(this).data('originalParent'))
}
return !dropped;
},
helper: function() { return $(this).clone().appendTo('body').show(); },
containment: '.sel_screen_left'
}).each(function() {
$(this).data('originalParent', $(this).parent())
});
$("#droppable_slots>div").droppable({
drop: function(event, ui) {
var $this = $(this);
var content = $.trim($this.html()).length;
if(content > 0) {
$this.html("");
}
$this.append(ui.draggable);
var width = $this.width();
var height = $this.height();
var cntrLeft = (width / 2) - (ui.draggable.width() / 2);
var cntrTop = (height / 2) - (ui.draggable.height() / 2);
ui.draggable.css({
left: cntrLeft + "px",
top: cntrTop + "px"
});
}
});
});
Live example: http://jsfiddle.net/CVbzg/3/
In the provided jsfiddle demonstration, there is an issue where once an image is dropped and moved out of the drop zone, it loses its draggable feature instead of reverting back to its original position. Can anyone offer a solution to this problem?