我刚开始使用jQuery UI拖动的div到表中的一列。 我有不同的背景颜色和它们内部的文本几个不同的可拖动的div,我需要他们能够拖动直至落区的克隆。 这工作得很好通过使用jQuery UI的例子购物车的代码,但我已经编辑它,以便整个对象被拖动,而不仅仅是文字,但是这则消除了由于某种原因,克隆功能,即使我有帮助:克隆。
这里是我的代码:
<script>
$(function() {
$( "ul li" ).draggable({
appendTo: "body",
helper: "clone"});
$( ".day #drag" ).draggable({
appendTo: "body"});
$( ".day" ).droppable({
activeClass: "ui-state-hover",
hoverClass: "ui-state-active",
accept: ":not(.ui-sortable-helper)",
drop: function( event, ui ) {
var targetElem = $(this).attr("id");
$( this ).addClass( "ui-state-highlight" );
$( ui.draggable ).appendTo( this );
}
}).sortable({
items: "li:not(.placeholder)",
sort: function() {
$( this ).removeClass( "ui-state-default" );
}
});
});
</script>
例如柱:
<td>
<div id="monday" class="day monday ui-widget-content"></div>
</td>
可拖动的元素:
<li><div style="background-color:#<?=$bgColor?>;color:<?=$textColor?>;" id="drag" class="<?=$subject?>"><?=$row['name']?></div></li>
它本质上是一个时间表设置工具。 感谢您的帮助
这里是一个的jsfiddle供参考: http://jsfiddle.net/x5T4h/