Drag & Drop In Containers

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;
    position: absolute;
    width: 300px;
    top: 100px;
    left: 100px;
    z-index: 50;
}

.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);
        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.minBoundX, Math.min(event.clientX - dragObj.posX, dragObj.maxBoundX)) + "px";
dragObj.element.style.top = Math.max(dragObj.minBoundY, Math.min(event.clientY - dragObj.posY, dragObj.maxBoundY)) + "px";
}

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

// CHANGED: makeObj now takes the event object instead of just the target
function makeObj(event) {
    var obj = new Object(),
        e = event.target;
    
    obj.element = e;
    
    // keeps track of the object that defines the boundaries 
    // default to the parent
    obj.boundElement = null; 
    
    // find a parentNode that has the "bound" class
    while (e.parentNode) {
        e = e.parentNode;
        
        if(e.className && -1 !== e.className.search(/bound/)) {
            obj.boundElement = e;
            break; // found our bounding element!
        }
    }
    
    // if we didn't find a suitable parent to use as our bound
    if (null === obj.boundElement) {
        // default to the parentNode if possible, otherwise the body
        obj.boundElement = (obj.element.parentNode === null) ? document.body : obj.element.parentNode;
    }
    
    // based on the bounding elements position, calculate our min/max bounds
    // the minimum boundary...