我想把一个div拖动到另一个div 这是我的代码:<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 因为有如下css 所以会保持在另一个div的外面element.style {
left:133px;
position:relative;
top:38px;
}我想问的是 :jquery-ui 本身有没有一种方法 在拖放后自动消除 还原原来的css 以及 消除添加的js谢谢
#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 因为有如下css 所以会保持在另一个div的外面element.style {
left:133px;
position:relative;
top:38px;
}我想问的是 :jquery-ui 本身有没有一种方法 在拖放后自动消除 还原原来的css 以及 消除添加的js谢谢
这句话是什么意思? 估计这应该就是错误了的来源吧这个css在你的源代码里 找补到对应吧
element.style {
left:133px;
position:relative;
top:38px;
}你想问的是什么?实在没看懂你的意思。 jquery的drop的方法,官网ui的api上基本都有。看一下就明白了。
jquery-ui 本身有没有一种方法 在拖放后自动消除 ?消除什么?
还原原来的css 以及 消除添加的js?
你要还原 原来的css?那就添加用over,out事件。over时,加class。out时,还原就新行了。
$(function() {
$("#draggable").draggable();
$("#droppable").droppable({
drop: function(event, ui) {
$(this).addClass('highlight').find('p').html('Dropped!');
$(this).append(ui.draggable.draggable( "destroy" ));
$("#droppable").addClass(className).removeClass('className');//添加删除你的class
}
});});