我有一堆可拖动的图像,我有一堆可放置的项目.在trello中,当我将图片拖到卡片上时,它会卡在卡片的右下角.@H_502_2@
如果我在同一张卡上拖动另一个人的图片,它会捕捉到最后一张图片的左侧,等等.这部分是jquery UI的内置API可放置还是这个自定义代码来获取此行为?@H_502_2@
@H_502_2@
最佳答案
这是使用jQuery-ui-droppable完成类似操作的一种方法.@H_502_2@
HTML@H_502_2@
@H_502_2@
CSS@H_502_2@
@H_502_2@
.draggable {
display:inline-block;
border:1px solid blue;
height: 22px;
width: 25px;
margin-right: 1px;
text-align: center;
vertical-align: center;
}
.droppable {
position: absolute;
border:1px solid black;
height:100px;
width:200px;
display:inline-block;
margin-left:50px;
text-align: right;
}
.bottom {
position: absolute;
bottom: 0;
height:25px;
width:200px;
}
jQuery的@H_502_2@
@H_502_2@
$(".draggable").draggable({ revert: "invalid",snapMode: "inner" });
$(".droppable").droppable({
drop: function( event,ui ) {
ui.helper.css('top','');
ui.helper.css('left','');
$(this).find('.bottom').prepend(ui.helper);
}
});
Fiddle Example@H_502_2@
另一个例子@H_502_2@
Multiple Droppables@H_502_2@
原文链接:https://www.f2er.com/jquery/428732.html