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"
});
}
});
});
现场示例:http: //jsfiddle.net/CVbzg/3/
正如您在 jsfiddle 示例中所见,当图像被放置时,它会完美锁定,但是当您移出放置区域时,它会失去可拖动性,而不是恢复并附加到其原始父级。
有人可以帮忙吗?