Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE HTML>
<html>
<head>
<style>
.area {width:350px;height:70px;border:1px solid #aaaaaa;}
.test{width:350px;height:210px;border:1px solid; cursor: move; background-color:red;}
</style>
<script>
​
var cumulativeOffset = function(element) {
    var top = 0, left = 0;
    do {
        top += element.offsetTop  || 0;
        left += element.offsetLeft || 0;
        element = element.offsetParent;
    } while(element);
​
    return {
        top: top,
        left: left
    };
};
var elementsMap = new Object();
var elementValue = "";
function allowDrop(ev) {
    ev.preventDefault();
}
​
function drag(ev) {
    elementsMap["old"+ev.target.id] = elementsMap[ev.target.id];
    ev.dataTransfer.setData("id", ev.target.id);
    ev.dataTransfer.setData("height", ev.target.offsetHeight);
    ev.target.style.opacity = '0.4';
    ev.target.style.position = '';
    if(ev.target.id in elementsMap)
    {
        var height = document.getElementById(elementsMap[ev.target.id]).offsetHeight;
        var containersY = Math.ceil(ev.target.offsetHeight/height);
        var containerPosY = document.getElementById(elementsMap[ev.target.id]).offsetTop;
        for(var i=0; i<containersY; i++)
        {
            document.elementFromPoint(document.getElementById(elementsMap[ev.target.id]).offsetLeft, containerPosY).classList.remove("used");
            containerPosY += height;
        }
    }
}
​
function dragend(ev)
{
    ev.target.style.opacity = '1';
    ev.target.style.position = 'absolute';
    if("old"+ev.target.id in elementsMap)
    {
        if(elementsMap["old"+ev.target.id] == elementsMap[ev.target.id])
        {
            var height = document.getElementById(elementsMap[ev.target.id]).offsetHeight;
            var containersY = Math.ceil(ev.target.offsetHeight/height);
            var containerPosY = document.getElementById(elementsMap[ev.target.id]).offsetTop;
            for(var i=0; i<containersY; i++)
            {
                document.elementFromPoint(document.getElementById(elementsMap[ev.target.id]).offsetLeft, containerPosY).classList.add("used");
                containerPosY += height;
            }
        }
    }
}
​
function drop(ev) 
{   
    var posY = cumulativeOffset(ev.target).top+parseInt(ev.dataTransfer.getData("height"))-10;
    if(document.elementFromPoint(ev.target.offsetLeft,posY).classList.contains("area"))
    {
        var containersY = Math.ceil(ev.dataTransfer.getData("height")/ev.target.offsetHeight);
        var containerPosY = ev.target.offsetTop;
        var status = true;
        for(var i=0; i<containersY; i++)
        {
            if(document.elementFromPoint(ev.target.offsetLeft, containerPosY).classList.contains("used"))
            {
                status = false;
                break;
            }
            containerPosY += ev.target.offsetHeight;
        }
        if(status)
        {
            containerPosY = ev.target.offsetTop;
            for(var i=0; i<containersY; i++)
            {
                document.elementFromPoint(ev.target.offsetLeft, containerPosY).classList.add("used");
                containerPosY += ev.target.offsetHeight;
            }
            ev.preventDefault();
            var id = ev.dataTransfer.getData("id");
            ev.target.appendChild(document.getElementById(id));
            elementsMap[ev.dataTransfer.getData("id")] = ev.target.id;
        }
    }
}
</script>
</head>
<body>
<div id="test" class="area" ondrop="drop(event)" ondragover="allowDrop(event)" ></div>
<div id="test2" class="area" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="test3" class="area" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="test4" class="area" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="test5" class="area" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="test6" class="area" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<div class="test" id="drag1" draggable="true" ondragstart="drag(event)" ondragend="dragend(event)"><a href='TEST'>abc</a></div>
<div class="test" id="drag2" draggable="true" ondragstart="drag(event)" ondragend="dragend(event)"><a>abc</a></div> 
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers