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"
});
}
});
});
Élő példa: http://jsfiddle.net/CVbzg/3/
Amint az a jsfiddle példában is látható, amikor egy képet elejtenek, tökéletesen rögzül, de amikor kimozdul a ledobási zónából, elveszíti a húzhatóságát, ahelyett, hogy visszaállna és hozzáfűzné az eredeti szülőhöz.
Tud valaki segíteni?
.html('')/.empty()-t hívja a cseppkezelőben lévő drop targeteken. Nem biztos benne, hogy ez volt a szándék vagy sem. 05.01.2013drop:függvényben azonosítsa be, hogy melyik képet ejtette el, vagy melyik tárolóba ejtette (saját kritériumai szerint), és hívja alocation = 'http://redict.to/path';05.01.2013data-addressértéke a html-ben annak meghatározására, hogy melyik oldalra irányítson át. 05.01.2013