Hey. I was wondering if someone could help out with my script. I'm starting out Javascript and right now i'm trying to make a content box draggable in most browsers. I've gotten it to the point where you can drag it in FF, IE, Safari.
Here's my js.
And here's my body
The problem I'm running into is in IE, I'm only able to drag my blue bar where the text "Drag Me" is, and no where else. I'm not if I'm doing my bubbling right.
Any help and tips apprecieated.
Here's my js.
Code:
function beginDrag(elementToDrag, event) {
// Compute the distance between the upper-left corner of the element
// and the mouse-click. The moveHandler function below needs these values.
var deltaX = event.clientX - parseInt(elementToDrag.style.left);
var deltaY = event.clientY - parseInt(elementToDrag.style.top);
// Register the event handlers that will respond to the mousemove events
// and the mouseup event that follow this mousedown event.
if (document.addEventListener) { // DOM Level 2 Event Model
// Register capturing event handlers
document.addEventListener("mousemove",moveHandler,true);
document.addEventListener("mouseup",upHandler, true);
}
else if (document.attachEvent) { // IE 5+ Event Model
// In the IE event model, we capture events by calling
// setCapture() on the element to capture them.
elementToDrag.attachEvent("onmousemove", moveHandler);
elementToDrag.attachEvent("onmouseup", upHandler);
elementToDrag.setCapture();
}
else { // IE 4 Event Model
// In IE 4 we can't use attachEvent(), so assign the event handlers
// can be restored. Note that this also relies on event bubbling.
var oldmovehandler = document.onmousemove;
var olduphandler = document.onmouseup;
document.onmousemove = moveHandler;
document.onmouseup = upHandler;
}
// We've handled this event. Don't let anybody else see it.
if (event.stopPropagation) event.stopPropagation(); // DOM Level 2
else event.cancelBubble = true;
// Now prevent any default action.
if (event.preventDefault) event.preventDefault(); // DOM Level 2
else event.returnValue = false; // IE
/**
* This is the handler that captures mousemove events when an element
* is being dragged. It is responsible for moving the element.
**/
function moveHandler(e) {
if(!e) e = window.event; // IE Event Model
// Move the element to the current mouse position, adjusted as
// necessary by the offset of the initial mouse-click.
elementToDrag.style.left = (e.clientX - deltaX) + "px";
elementToDrag.style.top = (e.clientY - deltaY) + "px";
// And don't let anyone else seee this event.
if (e.stopPropagation) e.stopPropagation(); // DOM Level 2
else e.cancelBubble = true;
}
/**
* This is the handler that captures the final mouseup event that
* occurs at the end of a drag.
**/
function upHandler(e) {
if (!e) e = window.event; // IE Event Model
// Unregister the capturing event handlers.
if (document.removeEventListener) { // DOM Event Model
document.removeEventListener("mouseup", upHandler,true);
document.removeEventListener("mousemove", moveHandler, true);
}
else if (document.detachEvent) { // IE 5+ Event Model
elementToDrag.detachEvent("onmouseup", upHandler);
elementToDrag.detachEvent("onmousemove", moveHandler);
elementToDrag.releaseCapture();
}
else { // IE 4 Event Model
document.onmouseup = olduphandler;
document.onmousemove = oldmovehandler;
}
// And don't let the event propagate any further.
if (e.stopPropagation) e.stopPropagation(); // DOM Level 2
else e.cancelBubble = true; // IE
}
}And here's my body
Code:
<div style="position:absolute; left:100px; top:100px; background-color:#C00; border:solid black;">
<div style="background-color:#00C; border-bottom:dotted black; padding:3px; font-family:sans-serif; font-weight:bold;" onmousedown="beginDrag(this.parentNode, event);">
Drag Me
</div>
<p>Drag me around the screen!</p>
<p>Come on...drag it! Drag it! Please drag me! Drag me!</p>
<p>Meep</p>
</div>Any help and tips apprecieated.
p