我的剧本:
$(function () {
initSwap();
function initSwap() {
initDroppable($(".dropdiv img,.dragdiv img"));
initDraggable($(".dragdiv img,.dropdiv img"));
}
function initDraggable($elements) {
$elements.draggable({
appendTo: "body",
tolerance: "pointer",
helper: "clone",
revert: "invalid"
});
}
function initDroppable($elements) {
$elements.droppable({
appendTo: "body",
activeClass: "ui-state-default",
hoverClass: "ui-drop-hover",
accept: ":not(.ui-sortable-helper)",
over: function (event, ui) {
var $this = $(this);
},
drop: function (event, ui) {
var draggableId = ui.draggable.attr("id");
var draggablePlace = ui.draggable.attr("place");
var droppableId = $(this).attr("id");
var droppablePlace = $(this).attr("place");
var $this = $(this);
var linew1 = $(this).after(ui.draggable.clone());
var linew2 = $(ui.draggable).after($(this).clone());
$(ui.draggable).remove();
$(this).remove();
initSwap();
}
});
}
});
我做了一个jsFiddle:http://jsfiddle.net/kehator/7bZrV/23/
它几乎完美,但我还需要做一件事
<div id="container" class="container">
我想存储容器的元素,以便盒子可以是空的,只有在将一个元素移动到另一个元素后才能更换部件