Change Flex Divs Order with Drag & Drop (No Jquery UI)

JavaScript
1

I have a group of flex divs which can be drag and drop, and as you can see, when any of them is dropped in any place different to its original place, it come back. Thus far, everything ok. What and trying to do now is that when you drop any div above another div, both changes their respective order. I’m only been able to do this with just one div (in the example, is the number eight), and I tried a lot of things, but i have no idea how extend this behavior to all divs. I’m using this plugin (http://draggabilly.desandro.com/), and, if its possible, i dont want to use jQuery UI (too weight for what i need). Is it possible make it whit only jQuery? (or some lightweigth plugin, but i search a lot and i dind’n find anyone). Thanks.

http://codepen.io/anon/pen/xGEeBg

<div class="inventory"></div>
<p></p>


.inventory {
    height: 300px;
    width: 400px;
    border: 1px black solid;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;

}

.item {
    width: 100px;
    height: 100px;
    box-sizing: border-box;
    border: 1px black solid;
    background-color: red;
}


// external js: draggabilly.pkgd.js

$(document).ready( function() {


    for(var i=1;i<=12;i++) {
        $(".inventory").append('<div class="item"></div>');
    }

    i = 0;

    $('.item').each(function(){
        i++;
        var n = i.toString();
        $(this).text(n + n);
        var offsetX = $(this).css("left");
        var offsetY = $(this).css("top");

        $(this).addClass(n);
        $(this).draggabilly();
        $(this).css("background-color","green");
        $(this).css("order", i);


        $(this).on("dragStart",function(){
            $(this).css({"transition": "none", "z-index": "9999", "background-color": "red"})
            .mousemove(function(e){
                $(this).on("dragEnd",function(){

                    $(this).css("top",offsetY);
                    $(this).css("left",offsetX);
                    $(this).css({"z-index": "1"});

                    var posX = e.pageX;
                    var posY = e.pageY;
                    var offset = $(".8").offset();
                    var right = offset.left + $(".8").width();
                    var bottom = offset.top + $(".8").height();
                    var order = $(this).css("order");
                    var order8 = $(".8").css("order");


                    $("p").html("posX: " + posX + " posY: " + posY + " 8 top: " + offset.top + " value: " + n);

                    if( bottom > posY 
                    &&  posY > offset.top 
                    && right > posX 
                    && posX> offset.left) {



                        $("p").html("CHECKED");
                        $(this).css("order", order8);
                        $(".8").css("order", order);
                        $(this).css("background-color", "grey");



                    }
                    else {
                        $(this).css("background-color", "yellow");
                    }

                })              
            })
        })
    })    
})
2

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.