JSFiddle - React, Tailwind, and code Playground

by Nicolas PUJOL

HTML

<div id="main">
    <div id="left" class="bloc"></div>
    <div id="center" class="bloc bloc-middle bloc-margin">
        <div id="name"></div>
        <div id="blocDrag" class="blocDraggable"></div>
    </div>
    <div id="right" class="bloc bloc-margin"></div>
</div>

CSS

.bloc {
    width:30%;
    height:200px;
    background-color: lightblue;
    float:left;
    text-align:center;
}
.bloc-margin {
    margin-left:5%
}
.bloc-middle {
    position:relative;
}
.blocDraggable {
    background-color:red;
    width:100px;
    height:100px;
    position: absolute;
    left: 20px;
    top: 20px;
}

JavaScript

var dataSource = {
    "data": [{
        "name": "name1",
            "id": 1
    }, {
        "name": "name2",
            "id": 2
    }]
}
var posLeft_Top = $("#left").offset().top;
var posLeft_Left = $("#left").offset().left;
var posRight_Top = $("#right").offset().top;
var posRight_Left = $("#right").offset().left;

console.log(posLeft_Top, posLeft_Left, posRight_Top, posRight_Left);
$("#blocDrag").on("mouseup", function () {
    console.log($(this).css("top"), $(this).offset().top, $(this).offset().left);
});

$("#name").html(dataSource.data[0].name);
dragElt($("#blocDrag"), $("#center"))
function dragElt(elt, eltLimit) {
    var dragging = null;
    $("#main").on("mousemove", function(e) {
        if (dragging) {
            dragging.offset({
                top: e.pageY,
                left: e.pageX
            });
        }
    });
    $("#main").on("mousedown", "div", function (e) {
        dragging = $(e.target);
    });
    $("#main").on("mouseup", function (e) {
        dragging = null;
    });
}