![](/img/trans.png)
[英]jQuery UI Draggable and Droppable, reverting and accepting elements
[英]how drop the droppable only in draggable elements in jquery ui
阅读一些类似的文章/问题,但是如果可放置对象是具有相同命名类的许多元素,则无法解决此问题。
如何使拖动的元素仅放置在可放置元素中。 如果将其拖动到其他位置,则返回原始父级。 (不会被拖动)。
HTML
<div class="box-body">
<div class="task">task</div>
</div>
<div class="box-body"></div>
JS
$('.task').draggable();
$('.box-body').droppable({
drop:function(e, ui) {
$(e.target).append($(ui.draggable).detach().css({'top':'', 'left':''}));
}
});
CSS
.box-body {
height:100px;
width:100px;
border:1px solid #333;
}
.task {
width:100%;
margin:5px;
border:1px solid #333;
}
样品
这里显示了如何还原可放置对象的位置
http://jqueryui.com/droppable/#revert
您可以通过以下方式初始化可拖动对象来完成此操作: $( "#draggable" ).draggable({ revert: "invalid" });
draggable $( "#draggable" ).draggable({ revert: "invalid" });
JS
$(function() {
$( "#draggable" ).draggable({ revert: "valid" });
$( "#draggable2" ).draggable({ revert: "invalid" });
$( "#droppable" ).droppable({
activeClass: "ui-state-hover",
hoverClass: "ui-state-active",
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" );
}
});
});
HTML
<div id="draggable" class="ui-widget-content">
<p>I revert when I'm dropped</p>
</div>
<div id="draggable2" class="ui-widget-content">
<p>I revert when I'm not dropped</p>
</div>
<div id="droppable" class="ui-widget-header">
<p>Drop me here</p>
</div>
CSS
#draggable, #draggable2 {
width: 100px;
height: 100px;
padding: 0.5em;
float: left;
margin: 10px 10px 10px 0;
}
#droppable {
width: 150px;
height: 150px;
padding: 0.5em;
float: left;
margin: 10px;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.