这是我的代码:
<style type="text/css">
#draggable { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0;
border:1px solid #DDDDDD;
color:#333333;
background:#F2F2F2;
}
#droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px;
border:1px solid #E78F08;
color:#FFFFFF;
font-weight:bold;
background:#F6A828;
}
#droppable.highlight{
background:#FFE45C;
}
</style>
<div class="demo" style="margin-left:35%;margin-top:10%;cursor:pointer;">
<div id="draggable">
<p>Drag me to my target</p>
</div>
<div id="droppable" >
<p>Drop here</p>
</div>
</div><!-- End demo -->
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8rc3.custom.min.js"></script>
<script type="text/javascript">
$(function() {
$("#draggable").draggable();
$("#droppable").droppable({
drop: function(event, ui) {
$(this).addClass('highlight').find('p').html('Dropped!');
$(this).append(ui.draggable.draggable( "destroy" ))
}
});
});
我想将一个div拖到另一个div中
当我停止拖动时,它显示:
这似乎没有“进入”可放置的 div ,
因为可拖动的div在使用“.draggable()”时会自动添加一些css样式
element.style {
left:133px;
position:relative;
top:38px;
}
我可以清理 css,但是 jquery-ui 有办法做到这一点吗?
最佳答案
不太确定您想要完成什么 - 更多细节会有所帮助,但这是一个镜头...
所以这是一个将拖动“插入”到拖放中的示例 - CSS 应用于助手而不是元素。
$("#draggable").draggable({
revert: 'invalid',
helper: 'clone',
zIndex: 350,
start: function() { $(this).toggle(); },
stop: function() { $(this).toggle(); }
});
$("#droppable").droppable({
accept: '#draggable',
drop: function(event, ui) {
$(this).addClass('highlight').find('p').html('Dropped!');
$(ui.draggable).draggable("destroy").appendTo($(this));
}
});
- 编辑 - 深入研究这个问题,我发布的代码与问题相反的原因是因为可拖动的“helper:clone”选项。使用助手时,它会将左/顶部 css 应用于助手,而不是我们正在拖动的实际元素。
draggable 中的开始/停止切换使原始元素消失,但在其放下时将其重新打开 - 以模拟 $().draggable() 的默认视觉效果。
另外,我会小心你的 css 中的 float - 这也可能会产生奇怪的结果。
关于javascript - 当有人使用 ".draggable()"时,如何清除自动添加的 jquery-ui 的 css 样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3286503/