Drag & Drop Inside Containers 2

by bizamajig

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Drag and drop</title>

<link rel="stylesheet" type="text/css" href="drag_and_drop.css" />

<script src="engine.js" type="text/javascript"> </script>
<!-- <script src="resizer.js" type="text/javascript"> </script> -->

</head>

<body>



<div id="min" class="helper-box" style="border: 1px solid blue;"></div>
<div id="max" class="helper-box" style="border: 1px solid red;"></div>

<div id="center">
    <h1>Hello World! <hr /></h1>
    <div id="box" class="bound">
        <p class="drag square"> One </p>
        <p class="drag square"> Two </p>
    </div>
</div>

</body>
</html>

CSS

@charset "utf-8";
/* CSS Document */


* {
    padding: 0px;
    margin: 0px;
}

.drag {
    position: absolute;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

.bound {
    ;
}

.square {
    width: 100px;
    height: 100px;
    background: red;
    cursor:move;
}

#center {
    width: 500px;
    height: 300px;
    margin: auto;
    margin-top: 50px;
    background-color:#ccc;
    text-align: center;
    border-radius: 25px;
    -moz-border-radius: 25px;
}

#box {
    background-color: #FF3;
    height: 278px;
    border-radius: 0 0 25px 25px;
    -moz-border-radius: 0 0 25px 25px;
    opacity: 0.5;
}

.helper-box {
    position: absolute;
    width: 5px;
    height: 5px;
}

JavaScript

// JavaScript Document

var dragObj;

document.addEventListener("mousedown", down, false);

function down(event) {
    if(~event.target.className.search(/drag/)) {
        dragObj = makeObj(event.target);
        dragObj.element.style.zIndex="100";
        document.addEventListener("mousemove", freeMovement, false);
    }
}

function freeMovement(event) {
    
    if (typeof(dragObj.element.mouseup) == "undefined")
        document.addEventListener("mouseup", drop, false);
    //Prevents redundantly adding the same event handler repeatedly

    dragObj.element.style.left = Math.max(dragObj.maxBoundX, Math.min(dragObj.minBoundX, event.clientX - dragObj.posX)) + "px";
    dragObj.element.style.top = Math.max(dragObj.maxBoundY, Math.min(dragObj.minBoundY, event.clientY - dragObj.posY)) + "px";
}

function drop() {
    dragObj.element.style.zIndex="1";
    
    document.removeEventListener("mousemove", freeMovement, false);
    document.removeEventListener("mouseup", drop, false);
    //alert("DEBUG_DROP");
}


function makeObj(e) {
    var obj = new Object();
    obj.element = e;
    
    obj.minBoundX = e.parentNode.offsetLeft + e.parentNode.offsetWidth - e.offsetWidth;
    obj.minBoundY = e.parentNode.offsetTop + e.parentNode.offsetHeight - e.offsetHeight;
    
    obj.maxBoundX = e.parentNode.offsetLeft;
    obj.maxBoundY = e.parentNode.offsetTop;
    
    setHelperBoxPos(obj);
    
    
    obj.posX = event.clientX - e.offsetLeft;
    obj.posY = event.clientY - e.offsetTop;
    
    if (e.parentNode) {
        do {
            if(~e.className.search(/bound/)) { //if(/bound/.test(e.className)) {
                obj.minBoundX = e.offsetLeft + e.offsetWidth - obj.element.offsetWidth;
                obj.maxBoundX = e.offsetLeft;
                obj.minBoundY = e.offsetTop + e.offsetHeight - obj.element.offsetHeight;
                obj.maxBoundY = e.offsetTop;
                return obj;
            }
                
        } while (e = e.parentNode);
    }
    
...