我有一堆可拖动的图像,我有一堆可放置的项目.在trello中,当我将图片拖到卡片上时,它会卡在卡片的右下角.
如果我在同一张卡上拖动另一个人的图片,它会捕捉到最后一张图片的左侧,等等.这部分是jquery UI的内置API可放置还是这个自定义代码来获取此行为?
这是我目前的代码:
最佳答案
这是使用jQuery-ui-droppable完成类似操作的一种方法.
HTML
CSS
.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的
$(".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);
}
});
另一个例子
我对trello不太熟悉,但会检查它是否有任何我缺少的功能.
原文链接:https://www.f2er.com/jquery/428732.html