Comment puis-je définir un “cadre” pour ma glisser en mesure de l'objet en javascript?

Je suis en train de faire un Glisser-Déposer du moteur JavaScript. J'ai appris comment mettre une boîte englobante que l'élément parent. Cependant, maintenant que je souhaite pour définir la boîte englobante pour n'importe quel parent, d'un parent, ou de la totalité de la page (lié moins).

Maintenant mon Moteur Javascript ressemble:

//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(0, Math.min(event.clientX - dragObj.posX, dragObj.boundX)) + "px";
dragObj.element.style.top = Math.max(0, Math.min(event.clientY - dragObj.posY, dragObj.boundY)) + "px";
}
function drop() {
dragObj.element.style.zIndex="1";
document.removeEventListener("mousemove", freeMovement, false);
document.removeEventListener("mouseup", drop, false);
//alert("DEBUG_DROP");
}
function makeBoundlessObj(e) {
var obj = new Object();
obj.element = e;
obj.boundX = e.parentNode.offsetWidth - e.offsetWidth;
obj.boundY = e.parentNode.offsetHeight - e.offsetHeight;
obj.posX = event.clientX - e.offsetLeft;
obj.posY = event.clientY - e.offsetTop;
return obj;
}
function makeObj(e) {
obj = new Object();
obj.element = e;
obj.boundX = e.parentNode.offsetWidth - e.offsetWidth;
obj.boundY = e.parentNode.offsetHeight - e.offsetHeight;
obj.posX = event.clientX - e.offsetLeft;
obj.posY = event.clientY - e.offsetTop;
var curleft = curtop = 0;
if (e.offsetParent) {
do {
curleft += e.offsetLeft;
curtop += e.offsetTop;
//alert(e.id + ":" + e.innerHTML);
if(~e.className.search(/bound/)) {
obj.boundX = curleft - obj.element.offsetLeft;
obj.boundY = curtop - obj.element.offsetTop;
return obj;
}
} while (e = e.offsetParent);
}
return obj;
}
function findPos(obj) { //Donated by `lwburk` on StackOverflow
var curleft = curtop = 0;
if (obj.offsetParent) {
do {
curleft += obj.offsetLeft;
curtop += obj.offsetTop;
} while (obj = obj.offsetParent);
return { x: curleft, y: curtop };
}
}

Mon CSS est comme suit:

@charset "utf-8";
/* CSS Document */
* {
padding: 0px;
margin: 0px;
}
.drag {
position: absolute;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.bound {
position: relative;
}
.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;
}

Et mon code HTML est assez propre:

<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>

J'ai tenté de faire des fonctions propres à plusieurs reprises. Je vais vous donner une que j'ai faite qui ne fonctionne pas, et je vais les énumérer pourquoi:

1. Si elle n'a pas de limites, j'ai mis le défaut de limites que l'élément parent (parce que je ne sais pas comment fixer des limites comme l'ensemble de la page)

2. Si l'un des éléments parents EST d'un bond, je ne suis pas le réglage de la limite coordonnées correctement (encore une fois, je ne sais pas comment)

Oh, et j'ai mis les limites alors que je créer les drag_object.

JavaScript fonction de création:

function makeObj(e) {
var obj = new Object();
obj.element = e;
obj.boundX = e.parentNode.offsetWidth - e.offsetWidth;
obj.boundY = e.parentNode.offsetHeight - e.offsetHeight;
obj.posX = event.clientX - e.offsetLeft;
obj.posY = event.clientY - e.offsetTop;
var curleft = curtop = 0;
if (e.offsetParent) {
do {
curleft += e.offsetLeft;
curtop += e.offsetTop;
//alert(e.id + ":" + e.innerHTML);
if(~e.className.search(/bound/)) {
obj.boundX = curleft - obj.element.offsetLeft;
obj.boundY = curtop - obj.element.offsetTop;
return obj;
}
} while (e = e.offsetParent);
}
return obj;
}

Est-ce le bon calcul pour le réglage de la boîte englobante et pourquoi? Puis-je me débarrasser de la position: relative dans le .bound classe? Puis-je faire .drag classe pas position: absolute? Je sais que toutes ces choses ne sera probablement grandement affecter la façon dont le cadre de la fonction est écrite. Si je avait à choisir entre le .drag de la classe ou de l' .bound classe à ne pas avoir besoin d'un certain type de position, je choisirais la .bound classe être réglé à n'importe quel type de positionnement.

Merci à vous tous pour la lecture et l'aider! Cela signifie beaucoup pour moi; je suis à temps plein (embarquement) élève à l'école secondaire avec très peu de temps libre =/

EDIT:

Je dois dire que j'en suis à ma dixième journée de l'apprentissage du Javascript ou du quinzième heure, selon la façon dont vous le regardez, et je voudrais apprendre la langue avant de me lancer à l'aide de bibliothèques comme jQuery. Ce moteur est un exercice académique que j'ai fait pour moi-même pour l'amour de la connaissance et de l'apprentissage de la langue =]