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>
body{width:1200px;}
.area {width:350px;height:70px;border:1px solid #aaaaaa;}
.test{width:340px;height:200px;border:1px solid; cursor: move; background-color:red;
    margin: 6px 0px 0px 5px;}
.column{float:left;}
</style>
<script>
var elementsMap = new Object();
var elementValue = "";
function allowDrop(ev) {
    ev.preventDefault();
}
​
function drag(ev) {
    ev.target.style.position = '';
    elementsMap["old"+ev.target.id] = elementsMap[ev.target.id];
    ev.dataTransfer.setData("id", ev.target.id);
    ev.dataTransfer.setData("height", ev.target.offsetHeight);
    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)
{
    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;
            }
        }
    }
    ev.target.style.position = 'absolute';
}
​
function drop(ev) 
{   
    ev.preventDefault();
    var posY = ev.target.offsetTop+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;
            }
            var id = ev.dataTransfer.getData("id");
            ev.target.appendChild(document.getElementById(id));
            elementsMap[ev.dataTransfer.getData("id")] = ev.target.id;
        }
    }
}
</script>
</head>
<body>
<div class="column">
<div id="test" class="area" ondrop="drop(event)" ondragover="allowDrop(event)" >
<div class="test" id="drag1" draggable="true" ondragstart="drag(event)" ondragend="dragend(event)">abc</div>
</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 class="test" id="drag2" draggable="true" ondragstart="drag(event)" ondragend="dragend(event)"><a>abc</a></div> 
</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>
<div id="test7" class="area" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</div>
<div class="column">
<div id="test8" class="area" ondrop="drop(event)" ondragover="allowDrop(event)" ></div>
<div id="test9" class="area" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="test10" class="area" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="test11" class="area" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="test12" class="area" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="test13" class="area" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="test14" class="area" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</div>
<div class="column">
<div id="test15" class="area" ondrop="drop(event)" ondragover="allowDrop(event)" ></div>
<div id="test16" class="area" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="test17" class="area" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="test18" class="area" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="test19" class="area" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="test20" class="area" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="test21" class="area" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</div>
<br>
</body>
</html>
​
 
​
 
​
Output 300px

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

Dismiss x
public
Bin info
anonymouspro
0viewers