使用 jquery droppable，我如何复制 trello 将人物图像拖放到卡片上的行为，它捕捉到卡片的右下角？

Posted 2023-05-08

【中文标题】使用 jquery droppable，我如何复制 trello 将人物图像拖放到卡片上的行为，它捕捉到卡片的右下角？

【英文标题】：Using jquery droppable, how can I replicate the behavior of trello dropping people images onto cards where it snaps to the bottom right of the card?

【发布时间】：2013-11-29 20:33:02

【问题描述】：

我有一堆可拖动的图像，还有一堆可放置的项目。在 trello 中，当我将图片拖到卡片上时，它会捕捉到卡片的右下角。

如果我在同一张卡片上拖动另一个人的图片，它会捕捉到最后一张图片的左侧，等等。jquery UI 的内置 API 的这一部分是可放置的，还是这个自定义代码可以实现这种行为？

这是我当前的代码：

 <script type="text/javascript">
    $(function () 
        $(".draggable").draggable( revert: "invalid", snap: "true", snapMode: "inner" );
        $(".droppable").droppable(
        );
    );
</script>

【参考方案1】：

这是使用jQuery-ui-droppable 完成类似任务的一种方法。

html

<div id="test">
    <div class="draggable">1</div>
    <div class="draggable">2</div>
    <div class="draggable">3</div>
    <br>
    <br>
    <div class="droppable">
        <div class="bottom"> 
        </div>    
    </div>
</div>

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", snap: "true", snapMode: "inner" );
$(".droppable").droppable(
    drop: function( event, ui ) 
           ui.helper.css('top','');
           ui.helper.css('left','');
           $(this).find('.bottom').prepend(ui.helper);
        
);

Fiddle Example

另一个例子

Multiple Droppables

我对@9​​87654330@ 不太熟悉，但会去看看是否有我遗漏的功能。

另外，如果您发现我的示例中缺少某些内容，请告诉我，我会努力解决。