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?

Question

I have a bunch of images that are draggable and I have a bunch of items that are droppable. In trello, when i drag a picture over a card, it snaps to the bottom right of the card.

If i drag another person's picture on that same card, it snaps to the left of the last image, etc. Is this part of built in API of jquery UI droppable or is this custom code to get this behavior?

Here is my current code:

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

Answer 1

This is one way to accomplish something similar using 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

Another example with

Multiple Droppables

I am not too familiar with trello but will go check it out to see if there is any functionality I am missing.

Also, let me know if you find something in my example that is lacking and I will work to address it.