Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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?

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.

enter image description here

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>
like image 421
leora Avatar asked Nov 16 '13 12:11

leora


1 Answers

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.

like image 65
Trevor Avatar answered Oct 15 '22 23:10

Trevor