juqery easy-ui 里面有着这两个功能,看着API做很简单,给你个参考脚本
<div class="row-fluid">
<div>
<div id="draggable"><dl></dl></div>
</div>
<div>
<div id="droppable"><dl></dl></div>
</div>
</div>//拖拽控件初始化
function InitDrop() {
$("#draggable dd").draggable({
addClasses: false,
appendTo: "body",
helper: "clone",
opacity: 0.65,
cursor: "move",
cursorAt: { right: 0 },
revert: false //当元素拖拽结束后,元素回到原来的位置
});
$("#droppable").droppable({
addClasses: false,
activeClass: "hover_color",
hoverClass: "hover_color",
accept: "dd",
tolerance: "touch",
drop: function (event, ui) {
$(this).find('dl').append(ui.draggable);
},
out: function (event, ui) { //当一个被允许(accept)的可拖拽元素移出可拖放元素时激活。
$("#draggable").find('dl').append(ui.draggable)
}
}).sortable();
}