The HTML5 current specification removed the <frameset> tag.
There is a nice feature of <frameset> which is not easy to reproduce without it:
In a frameset, you can change the position of the line separating the frames with the mouse.
How would I provide the same functionality with with using DIVs in JavaScript?
I've come across the following which demonstrates the behavior I'm looking for. However I would like to avoid using JQuery, even though using jQuery should be the preferred way.
After looking at your example fiddle, I can say that this is actually quite easy without jQuery.
All the functions there are just simple innerHTML and style manipulation, and event subscription.
A direct rewrite of that code without jQuery would be:
var i = 0;
document.getElementById("dragbar").onmousedown = function (e) {
e.preventDefault();
document.getElementById("mousestatus").innerHTML = "mousedown" + i++;
window.onmousemove = function (e) {
document.getElementById("position").innerHTML = e.pageX + ', ' + e.pageY;
document.getElementById("sidebar").style.width = e.pageX + 2 + "px";
document.getElementById("main").style.left = e.pageX + 2 + "px";
};
console.log("leaving mouseDown");
};
window.onmouseup = function (e) {
document.getElementById("clickevent").innerHTML = 'in another mouseUp event' + i++;
window.onmousemove = null;
};
So here is the same fiddle with pure JS.
EDIT: As #BenjaminGruenbaum pointed out, overriding the on* properties on a DOM element is not the same as specifying a new event handler.
Overriding properties like onmouseup, onload, onclick on DOM elements is the "old" way, and therefore it was supported in even the stone age of JS. My code above was written like that.
Nowadays the standard way of adding and removing event handlers are addEventListener and removeEventListener. They are not supported in old IE (but this can be worked around).
It let's you attach unlimited number of listeners to the same event and they will not interfere with each other.
So the same functionality can be achieved by:
var i = 0;
function dragBarMouseDown(e) {
e.preventDefault();
document.getElementById("mousestatus").innerHTML = "mousedown" + i++;
window.addEventListener("mousemove", windowMouseMove, false);
console.log("leaving mouseDown");
}
function windowMouseMove(e) {
document.getElementById("position").innerHTML = e.pageX + ', ' + e.pageY;
document.getElementById("sidebar").style.width = e.pageX + 2 + "px";
document.getElementById("main").style.left = e.pageX + 2 + "px";
}
function windowMouseUp(e) {
document.getElementById("clickevent").innerHTML = 'in another mouseUp event' + i++;
window.removeEventListener("mousemove", windowMouseMove, false);
}
document.getElementById("dragbar").addEventListener("mousedown", dragBarMouseDown, false);
window.addEventListener("mouseup", windowMouseUp, false);
Fiddle.
Note that in this case my functions are not anonymous, so a self executing function for scoping would make sense here, if you are not already in function scope.
Here is a horizontal version of #SoonDead's pure and simple answer with a bottom shelf and a horizontal divider.
The result should look like this:
fiddle here
var i = 0;
function dragBarMouseDown(e) {
e.preventDefault();
document.getElementById("mousestatus").innerHTML = "mousedown" + i++;
window.addEventListener("mousemove", windowMouseMove, false);
console.log("leaving mouseDown");
}
function windowMouseMove(e) {
document.getElementById("position").innerHTML = e.pageX + ', ' + e.pageY;
//document.getElementById("main").style.height = e.pageY + 2 + "px";
document.getElementById("dragbar").style.top = e.pageY + 2 + "px";
document.getElementById("bottomshelf").style.top = e.pageY + 17 + "px";
}
function windowMouseUp(e) {
document.getElementById("clickevent").innerHTML = 'in another mouseUp event' + i++;
window.removeEventListener("mousemove", windowMouseMove, false);
}
document.getElementById("dragbar").addEventListener("mousedown", dragBarMouseDown, false);
window.addEventListener("mouseup", windowMouseUp, false);
body, html {
width:100%;
height:100%;
padding:0;
margin:0;
}
#header {
background-color: wheat;
width:100%;
height: 50px;
}
#main {
background-color: BurlyWood;
float: top;
position: absolute;
top:50px;
width:100%;
bottom: 38px;
overflow-y: hidden;
}
#dragbar {
background-color:grey;
width:100%;
float: top;
top:120px;
bottom:0px;
height: 15px;
cursor: row-resize;
position:absolute;
}
#bottomshelf {
background-color: IndianRed;
width:100%;
float: top;
position: absolute;
top:135px;
bottom: 38px;
}
#footer {
background-color: PaleGoldenRod;
width:100%;
height: 38px;
bottom:0;
position:absolute;
}
<div id="header">header <span id="mousestatus"></span>
<span id="clickevent"></span>
</div>
<div id="main">main area:
The bottom shelf will slide over this.
</div>
<div id="dragbar">drag me up or down</div>
<div id="bottomshelf">
<span id="position"></span>
bottom shelf</div>
<div id="footer">footer</div>
I don't have enough reputation to add comment to "SoonDead"s solutions, so I have to do this. :-( The solutions are great and worked out for me, except for IE8
1) The line
e.preventDefault();
has two issues for IE8
the argument "e"vent is not defined.
preventDefault method is not defined for e
So the above line is replaced with:
e = e || window.event;
e.preventDefault ? e.preventDefault() : e.returnValue=false;
The above stopped the errors (and I stopped here since I don't really care about IE8 but do not want error boxes popping up for the hapless user). So yes, in my app IE8 users cannot resize.
However, I did chase it down a little, and found these issues:
Code flow did not enter the onmousemove function
The e.pageX will have to be replaced by e.clientX or e.screenX (depending on your case) since I could not see pageX as a property in the IE8 debugger.
Here are some options discussed on SO.
My personal recommendation would be jQuery Resizable.
As BenjaminGruenbaum said in a comment, jQuery is JavaScript. If you don't want to load the full jQuery library, you'll need to find which parts of the jQuery library you need and pull out the source JavaScript to use. It's certainly doable.
Related
I want to achieve a background animate image, that moves from right to left, but the image won´t animate, could you help me verify my code?
<body>
<div id="background-container"></div>
<script> type="text/javascipt">
function animateBackground(elem, speed) {
var x = 0 ;
var y = -50;
elem.style.backgroundPosition = x + 'px' + ' ' + y + 'px';
var timer = setInterval (function(speed) {
elem.style.backgroundPosition = x + 'px' + ' ' + y + 'px';
x--;
if (x == -600) {
clearInterval(timer);
}
},speed)
}
document.addEventListener("DOMContentLoaded", animateBackground(document.getElementById('background-container'), 15), false);
</script>
</body>
Your code is quite ugly but actually it looks fine. What is definitely wrong is how you are adding the event handler. Instead of adding a handler function, you call your handler function inline, so it actually doesn't add any listener. You should pass the function itself, for example like this, using an anonymous function inline.
document.addEventListener("DOMContentLoaded", function() { animateBackground(document.getElementById('background-container'), 15); }, false);
You could have provided a jsfiddle link, which would have made it easy. By the way here is the working jsfiddle, https://jsfiddle.net/pmankar/4o88z0tt/
I added a css background to the div tag using
div{
background-image: url("https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png");
height: 100px;
width: 600px;
border: 2px solid green;
}
Rest assured, I didn't do any changes to your js code or the html code. It worked fine for me.
I was assigned a task to make a script which will generate a pop-up window when the mouse cursor goes over the current opened browser tab.
Something like this demo : http://demo.exitmonitor.com/ but here the pop-up appears always when the mouse leaves the top part of the web page.
I need to generate this window exactly when the mouse is over my current active browser tab.
Is it possible to do this with javascript?
I believe you need mouseleave event:
<script>
function addEvent(obj, evt, fn) {
if (obj.addEventListener) {
obj.addEventListener(evt, fn, false);
}
else if (obj.attachEvent) {
obj.attachEvent("on" + evt, fn);
}
}
addEvent(window, "load", function (e) {
addEvent(document, "mouseleave", function (e) {
e = e ? e : window.event;
var from = e.relatedTarget || e.toElement;
if (!from || from.nodeName == "HTML") {
//.... do_this
}
});
});
</script>
I assume by "tab" you mean the area highlighted in red:
In all modern browsers a website cannot access anything out of its window, except for APIs explicitly provided to it.
Therefore, there is not way for you to even access the tab bar with just JavaScript.
Whether or not there is at all a way to get access to the tab bar depends on the browser, but it will (most certainly) require a browser addon.
In Chrome, for example, this was not at all possible back in 2010 and it looks like nothing has changed there.
In Firefox however, an addon can actually do this.
Assuming you know how to attach a script to browser.xul, I'm leaving out install.rdf, chrome.manifest and overlay.xul, so here's only the relevant JavaScript:
(function()
{
// Wait for the browser to settle
top.addEventListener('load', function load(event)
{
// It only needs to do that once
top.removeEventListener('load', load);
// Get notified about every page that loads
top.gBrowser.addEventListener('DOMContentLoaded', function(event)
{
// Get the current tab
var tab = top.gBrowser.mCurrentTab;
// Check if we already annoyified it
if(tab.annoyingOrange === undefined)
{
// If not, let's do that!
tab.annoyingOrange = 'Plumpkin';
// Add a mouseover event to it
top.gBrowser.mCurrentTab.addEventListener('mouseover', function(ev)
{
// Since we do that to all tabs, we need to check here if we're still the selected tab
if(ev.target == top.gBrowser.mCurrentTab)
{
// And now we can get onto everybody's nerves!
alert('Hey apple!!!');
}
});
}
});
});
})();
Tested with Firefox 37.0.1 on Windows.
[ Download .xpi ] (Protip: Unzip for source)
But if your browser does not support it, you are out of luck and there is nothing you can do!
Anyway, this is a very bad thing to do and it annoys people to no end!
This should never, never ever be done in a production or even beta environment!
This works with modern jquery versions 1.8.1 +
Popup will show when user clicks above the current window as if they were going to switch tabs or perform some other action. It only pops once so it's less intrusive and it's all customizable message wise and style.
html
<div id='confirm'>
<div class='message'></div>
<button class='yes'>OK</button>
</div>
css
#confirm {display:none; top:50%; left:50%; transform:translate(-50%, -50%); background:#595959; position:fixed; width:650px; height:auto; padding:40px; text-align:center; box-shadow:0px 0px 22px -2px rgba(0,0,0,0.5); z-index:1000;}
#confirm button {width:100%; height:70px; color:#fff; background:#595959; display:inline-block; border:1px solid #fff; text-align:center; font-size:12pt; letter-spacing:2px; margin-top:40px; bottom:10px; cursor:pointer; opacity:0.5; transition:0.9s;}
#confirm button:hover {opacity:1;}
#confirm .message {color:#fff;}
js
var mouseX = 0;
var mouseY = 0;
var popupCounter = 0;
document.addEventListener("mousemove", function(e) {
mouseX = e.clientX;
mouseY = e.clientY;
document.getElementById("coordinates").innerHTML = "<br />X: " + e.clientX + "px<br />Y: " + e.clientY + "px";
});
$(document).mouseleave(function (msg, myYes) {
if (mouseY < 100) {
if (popupCounter < 1) {
msg = "There's something in your basket, are you sure you want to leave?";
var confirmBox = $("#confirm");
confirmBox.find(".message").text(msg);
confirmBox.find(".yes").unbind().click(function() {
confirmBox.hide();
});
confirmBox.find(".yes").click(myYes);
confirmBox.show();
}
popupCounter ++;
}
});
https://jsfiddle.net/pgx7c5d4/
Use MouseEvent.clientX and MouseEvent.clientY to track where the mouse is on the document, and then put the popup there using absolute positioning:
//The popup:
var span = document.createElement("span");
span.style.position = "absolute";
span.textContent = "I'm a popup!";
//When the page loads, the popup will be in the top-left corner
//because we can't know where the mouse is on the page load.
document.body.insertBefore(span, document.body.firstChild);
//The event:
document.addEventListener("mousemove", function(e) {
//Position the span according to its dimensions and where the mouse is.
span.style.marginLeft = e.clientX-span.clientWidth/2+"px";
span.style.marginTop = e.clientY-span.clientHeight/2+"px";
});
I have a bunch of divs positioned absolutely on top of each other. When I bind a click event to all of them, only the top div responds. How can I send the event to all divs under the cursor?
Taking FelixKling's suggestion to use document.elementFromPoint() and Amberlamps's fiddle, and employing jQuery for the DOM interactions, I ended up with the following :
$divs = $("div").on('click.passThrough', function (e, ee) {
var $el = $(this).hide();
try {
console.log($el.text());//or console.log(...) or whatever
ee = ee || {
pageX: e.pageX,
pageY: e.pageY
};
var next = document.elementFromPoint(ee.pageX, ee.pageY);
next = (next.nodeType == 3) ? next.parentNode : next //Opera
$(next).trigger('click.passThrough', ee);
} catch (err) {
console.log("click.passThrough failed: " + err.message);
} finally {
$el.show();
}
});
DEMO
try/catch/finally is used to ensure elements are shown again, even if an error occurs.
Two mechanisms allow the click event to be passed through or not :
attaching the handler to only selected elements (standard jQuery).
namespacing the click event, click.passThrough analogous to event.stopPropagation().
Separately or in combination, these mechanisms offer some flexibility in controlling the attachment and propagation of "passThrough" behaviour. For example, in the DEMO, try removing class p from the "b" element and see how the propagation behaviour has changed.
As it stands, the code needs to be edited to get different application-level behaviour. A more generalized solution would :
allow for programmatic attachment of app-specific behaviour
allow for programmatic inhibition of "passThrough" propagation, analogous to event.stopPropagation().
Both of these ambitions might be achieved by establishing a clickPassthrough event in jQuery, with underlying "passThrough" behaviour, but more work would be involved to achieve that. Maybe someone would like to have a go.
This is not as easy as you might think. This is a solution that I came up with. I only tested it in Chrome and I did not use any framework.
The following snippet is just for add a click event to every div in the document, that outputs its class name when triggered.
var divs = document.getElementsByTagName("div");
for(var i = 0; i < divs.length; i++) {
divs[i].onclick = function() {
console.log("class clicked: " + this.className);
};
}
Attaching a click event to the body element so that every single click event is noticed by our script.
if(document.addEventListener) {
document.body.addEventListener("click", countDivs);
} else if(document.attachEvent) {
document.attachEvent("onclick", countDivs);
}
Iterate through all divs that you want to check (you might want to adjust here to your preferred range of divs). Generate their computed style and check whether the mouse coordinates are within the range of the div´s position plus its width and height. Do not trigger click event when the div is our source element because the click event has already been fired by then.
function countDivs(e) {
e = e || window.event;
for(var i = 0; i < divs.length; i++) {
var cStyle = window.getComputedStyle(divs[i]);
if(divs[i] !== e.target && e.pageX >= parseInt(cStyle.left) && e.pageX <= (parseInt(cStyle.left) + parseInt(cStyle.width)) && e.pageY >= parseInt(cStyle.top) && e.pageY <= (parseInt(cStyle.top) + parseInt(cStyle.height))) {
divs[i].click();
}
}
}
CSS:
.a, .b, .c {
position: absolute;
height: 100px;
width: 100px;
border: 1px #000 solid
}
.a {
top: 100px;
left: 100px;
}
.b {
top: 120px;
left: 120px;
}
.c {
top: 140px;
left: 140px;
}
HTML:
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
I also added a jsFiddle
A simple way could be to use elementFromPoint():
http://jsfiddle.net/SpUeN/1/
var clicks = 0,cursorPosition={};
$('div').click(function (e) {
if(typeof cursorPosition.X === 'undefined') {
cursorPosition.X = e.pageX;
cursorPosition.Y = e.pageY;
}
clicks++;
e.stopPropagation();
$(this).addClass('hided');
var underELEM = document.elementFromPoint(cursorPosition.X, cursorPosition.Y);
if (underELEM.nodeName.toUpperCase() === "DIV") $(underELEM).click();
else {
$('#clicks').html("Clicks: " + clicks);
$('.hided').removeClass('hided');
clicks=0;
cursorPosition = {};
}
});
If you are stacking elements absolutely it may be simpler to stack them all in a positioned container, and handle the events from this parent. You can then manipulate its children without having to measure anything.
Usually I prefer to write my own solutions for trivial problems because generally plugins add a lot of unneeded functionality and increase your project in size. Size makes a page slower and a 30k difference (compared to jquery draggable) in a 100k pageviews / day website makes a big difference in the bill. I already use jquery and I think that's all I need for now, so please, don't tell me to use another plugin or framework to drag things around.
Whit that in mind I wrote the following code, to allow a box to be draggable around. The code works just fine (any tip about the code itself will be great appreciate), but I got a small little glitch.
When I drag the box to the browser right edge limit, a horizontal scroll bar appears, the window width gets bigger because of the box. The desirable behavior is to see no horizontal scroll bar, but allow to put part of the box outside the window area, like a windows window do.
Any tips?
CSS:
.draggable {
position: absolute;
cursor: move;
border: 1px solid black;
}
Javascript:
$(document).ready(function() {
var x = 0;
var y = 0;
$("#d").live("mousedown", function() {
var element = $(this);
$(document).mousemove(function(e) {
var x_movement = 0;
var y_movement = 0;
if (x == e.pageX || x == 0) {
x = e.pageX;
} else {
x_movement = e.pageX - x;
x = e.pageX;
}
if (y == e.pageY || y == 0) {
y = e.pageY;
} else {
y_movement = e.pageY - y;
y = e.pageY;
}
var left = parseFloat(element.css("left")) + x_movement;
element.css("left", left);
var top = parseFloat(element.css("top")) + y_movement;
element.css("top", top);
return false;
});
});
$(document).mouseup(function() {
x = 0;
y = 0;
$(document).unbind("mousemove");
});
});
HTML:
<div id="d" style="width: 100px; left: 0px; height: 100px; top: 0px;" class="draggable">a</div>
For a simple solution, you could just add some CSS to the draggable object's container to prevent the scrollbars.
body { overflow: hidden; }
jsFiddle: http://jsfiddle.net/F894P/
Instead of this :
$("#d").live("mousedown", function () {
// your code here
}); // live
try this :
$("body").on("mousedown","#d", function(){
// your code here
$("#parent_container").css({"overflow-x":"hidden"});
// or $("body").css({"overflow-x":"hidden"});
}); // on
Where #parent_container is where your draggable object is.
You should be using jQuery 1.7+
As of jQuery 1.7, the .live() method is deprecated. Use .on() to attach event handlers. Users of older versions of jQuery should use .delegate() in preference to .live().
I'm trying to make a drag-and-drop engine in JavaScript. Right now, I'm adding a bounds feature which will trap the .drag object inside its parent element. However, to do this, I need to understand how positioning works in html, and I don't. Can anyone thoroughly explain it?
Javascript Engine:
// JavaScript Document
var posX;
var posY;
var element;
var currentPos;
document.addEventListener("mousedown", drag, false);
function drag(event) {
if(~event.target.className.search(/drag/)) {
element = event.target;
element.style.zIndex="100";
currentPos = findPos(element);
posX = event.clientX -currentPos.x;
posY = event.clientY -currentPos.y;
if(~event.target.className.search(/bound/))
document.addEventListener("mousemove", boundMovement, false);
else
document.addEventListener("mousemove", freeMovement, false);
}
}
function freeMovement(event) { // This functions works
if (typeof(element.mouseup) == "undefined")
document.addEventListener("mouseup", drop, false);
//Prevents redundantly adding the same event handler repeatedly
element.style.left = event.clientX - posX + "px";
element.style.top = event.clientY - posY + "px";
}
function boundMovement(event) { // This function doesn't work
if (typeof(element.mouseup) == "undefined")
document.addEventListener("mouseup", drop, false);
//Prevents redundantly adding the same event handler repeatedly
// Below logic is false- I wish to understand why =]
currentPos = findPos(element.offsetParent);
if((event.clientX - posX) <= currentPos.x)
element.style.left = event.clientX - posX + "px";
if((event.clientY - posY) <= currentPos.y)
element.style.top = event.clientY - posY + "px";
}
function drop() {
element.style.zIndex="1";
document.removeEventListener("mousemove", boundMovement, false);
document.removeEventListener("mousemove", freeMovement, false);
document.removeEventListener("mouseup", drop, false);
//alert("DEBUG_DROP");
}
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 };
}
}
Here is the CSS I am using:
#charset "utf-8";
/* CSS Document */
.drag {
position: absolute;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.bound {
/* Class to signify that the drag_object can not leave the parent element */
;
}
.square {
width: 100px;
height: 100px;
background: red;
cursor:move;
}
p {
padding: 0px;
margin: 0px;
outline-style: dotted;
outline-color: #000;
outline-width: 1px;
}
Some example HTML:
<p class="drag bound square">Thing One</p>
<p class="drag square">Thing Two</p>
Please note I am including the JavaScript so that if I have questions on how things are applied relative to what I've written. Also, thank you all for reading and helping. StackOverflow has been an exceptional resource in learning how to code in JavaScript.
EDIT:
1) I should say that I am coding the engine to help me learn the language. This is my first week of JavaScript, and I would like to be able to code in the language before I use a library.
2) For example I would really like for someone to explain how offsets are working here. I would like to know how instead of using position:absolute to make my JavaScript engine, I can use position:relative so that elements can stack on top of each other ect.
I've posted a solution at http://jsfiddle.net/vJ6r6/.
First of all, I nested the items to be dragged inside the bounding box:
<div class="bound">Thing One
<div class="drag square">Thing Two</div>
<div class="drag square">Thing Three</div>
</div>
Also, I turned them into div's because p's can't be nested. (Don't forget to change the style declaration as well.)
Then, I set styles on the bounding box:
<style>
.bound {
margin: 100px;
width: 400px;
height: 400px;
position: relative;
}
</style>
The key property is position: relative, which causes the items inside it to be positioned relative to it, rather than to the page. Note that because I'm using relative positioning, this example works best when you want to keep the items in a particular container.
My changes to the JavaScript were more radical, so here's the whole thing:
<script>
var dragInfo;
function down(event) {
if (~event.target.className.search(/drag/)) {
document.addEventListener("mouseup", drop, false);
var t = event.target;
t.style.zIndex = 100;
dragInfo = {
element: t,
// record the bounds
maxX: t.parentNode.offsetWidth - t.offsetWidth,
maxY: t.parentNode.offsetHeight - t.offsetHeight,
// we don't need findPos, because it's no longer relative to the page
posX: event.clientX - t.offsetLeft,
posY: event.clientY - t.offsetTop
};
document.addEventListener("mousemove", freeMovement, false);
}
}
function freeMovement(event) {
// the min and max calculations keep the X and Y within the bounds
dragInfo.element.style.left = Math.max(0, Math.min(event.clientX - dragInfo.posX, dragInfo.maxX)) + "px";
dragInfo.element.style.top = Math.max(0, Math.min(event.clientY - dragInfo.posY, dragInfo.maxY)) + "px";
}
function drop() {
dragInfo.element.style.zIndex = 1;
document.removeEventListener("mousemove", freeMovement, false);
document.removeEventListener("mouseup", drop, false);
}
document.addEventListener("mousedown", down, false);
</script>
Note that this line:
dragInfo.element.style.left = Math.max(0, Math.min(event.clientX - dragInfo.posX, dragInfo.maxX)) + 'px';
Is equivalent to this:
var x = event.clientX - dragInfo.posX;
if (x < 0) x = 0;
if (x > dragInfo.maxX) x = dragInfo.maxX;
dragInfo.element.style.left = x + 'px';
I think the problem (with your example at least) is that when you call the findPos function for the bounded element in boundMovement, you are passing its parent, which has no parent of its own. So inside the findPos function this specific line
if (obj.offsetParent) {
// ...
is returning undefined because it doesn't have a parent. Try removing that if statement and try it again.
Have you seen this jQuery demo http://jqueryui.com/demos/draggable/#events
using jQuery makes JavaScript much easier, and will also ensure that your code works cross browser.
You may find this helpful
A list Apart's css-positioning 101
What exactly is the problem you are having?
Absolute removes the element from normal "flow of the document" and allows you to position it where you want.
Relative position is a lot like static but allows you to absolute position elements within it.
Static follows the normal document flow. (stacking)
By the way, I recommend you use a library or framework like JQuery or Prototype instead of building this by hand. It will save you hours of frustration and testing in different browsers.
Edit:
Since you are hellbent doing this the hard way...I hope I can be of some help.
I recomend you download the the firebug addon for Firefox if that is what you use or get familiar Javascript Console under tools in Chrome.
HTML
<p class="drag bound square">Thing One</p>
<p class="drag square">Thing Two</p>
There is no parent/child relationship here did you mean for the document to be the boundry?
freeMovement does not call findPos on the elements offSetParent where BoundMovement does.
This is retuning undefined since the document does not have that property.
Try wrapping these two paragraphs in something other than the body tag.
<div id='container'>
<p class="drag bound square">Thing One</p>
<p class="drag square">Thing Two</p>
</div>