我刚刚开始使用 jQuery UI 将 div 拖到表中的列中。我有几个不同的可拖动 div,其中有不同的背景颜色和文本,并且我需要它们能够作为克隆拖动到放置区域。通过使用 jQuery UI 的示例购物车代码,效果很好,但我对其进行了编辑,以便拖动整个对象而不仅仅是文本,但这随后由于某种原因消除了克隆功能,即使我有 helper:clone。
这是我的代码:
<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/ http://jsfiddle.net/x5T4h/
不确定这是否正是您想要的,但这对您来说是一个好的开始:http://jsfiddle.net/x5T4h/2/ http://jsfiddle.net/x5T4h/2/
基本上,我删除了第二个draggable
对象声明,我添加了克隆函数来复制里面的元素drop
event $( ui.draggable ).clone().appendTo( this );
$(function() {
$( "ul li" ).each(function(){
$(this).draggable({
helper: "clone"
});
});
$( ".day" ).droppable({
activeClass: "ui-state-hover",
hoverClass: "ui-state-active",
accept: ":not(.ui-sortable-helper)",
drop: function( event, ui ) {
var targetElem = $(this).attr("id");
$( ui.draggable ).clone().appendTo( this );
}
}).sortable({
items: "li:not(.placeholder)",
sort: function() {
$( this ).removeClass( "ui-state-default" );
}
});
});
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)