This Message Forum is no longer in use

Please use the new Bravenet Help Forums FOUND HERE


Return to Website  > Index
Recent Posts
 
General Forum
This Forum is Locked
Author
Comment
scutterman
Feb 3, 2010 - 5:21PM
addEventListener/attachEvent seems to detach itself

addEventListener/attachEvent seems to detach itself

I've been working on a drag and drop code using mousedown with setInterval to call a function to move it, and mouseup to cancel the interval.

It works exactly how I want it to except for one thing. I can move it anywhere I want the first mousedown/mouseup combination, but then next time I click on it nothing happens, I can't move it.

I know it is the mousedown listen that's the problem because the mouseup function still calls.
I've tried putting an alert in the function that starts the interval, it goes off once only. I tried placing it in the listener anonymous function, same thing.

I've tried it in IE8 and FF3.6, both show the exact same thing.

The code can be seen at the link below, but I'll post an edited version here.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<meta ="Content-type" content="text/html; charset=UTF-8">

<title> Drag and Drop Test </title>

<style type="text/css">

body {
width: 100%;
height: 100%;
}

.moveable {

}

</style>

</head>

<body>

<div id="dd1" class="moveable" style="width: 300px; height: 20px; border: 3px solid black; background-color: #dedede;">This should cause the mousedown</div>

<script type="text/javascript">
<!-- Hide Script

// set the conditions to begin dragging and dropping an element
function draganddrop() {

/*******************************
* This only ever executes once *
******************************/

el.style.border = "1px solid blue";
down = true;
//el.style.cursor = "pointer";
if (!active[el.id]) addItem(el);
active[el.id].act = 'active';
var tID = setInterval(moveItem, 10); // call the function that moves the box
// (function edited out for conciseness)
active[el.id].tid = tID;
}

// remove conditions to drag and drop an item
function unclick() {

/*******************************
* This executes every click *
******************************/

el.style.border = "1px solid black";
if (el !== null && checkActive()) {
clearInterval(parseInt(active[el.id].tid));
down = false;
active[el.id].act = 'inactive';
active[el.id].tid = '';
//el.style.cursor = "move";
Mpos.oldX = 0;
Mpos.oldY = 0;
}
}

// adds an element to the list of active items as inactive
function addItem(emnt) {
if (!emnt.id) {
var d = Date;
var timestr = d.getFullYear() + ','
+ d.getMonth()+1 + ','
+ d.getDate() + ','
+ d.getHours() + ','
+ d.getMinutes() + ','
+ d.getSeconds();
var newID = d.UTC(timestr);

while (document.getElementById(newID)) {
newID = Math.floor(Math.random(newID));
}
emnt.id = newID;
}

active[emnt.id] = {act:'inactive', tid:''};
}

function checkActive() {
if (el == null || !active[el.id]) return false;
else if (active[el.id].act == 'inactive') return false;
else if (active[el.id].act == 'active') return true;
else return false;
}

// adds an event to an element
// then adds it to the active items list as inactive
function addClickible(emnt) {
addEvent(emnt, 'mousedown', function (){

/*******************************
* This only ever executes once *
******************************/

el = emnt; draganddrop();
}, false);
//emnt.style.cursor = "move";
addItem(emnt);
}

// cross-browser adding of events
function addEvent(ele, evnt, func, bubble) {

if (ele.addEventListener){
ele.addEventListener(evnt, func, bubble);
}
else if (ele.attachEvent){
ele.attachEvent('on'+evnt, func);
}

}

// cross-browser removing of events
function remEvent(ele, evnt, func, bubble) {

if (ele.removeEventListener){
ele.removeEventListener(evnt, func, bubble);
}
else if (ele.detachEvent){
ele.detachEvent('on'+evnt, func);
}
}

// End Hide -->
</script>

<script type="text/javascript">
<!-- Hide Script

// set variables
var down = false; // whether the left mouse button is held down
var active = {}; // a list of items and whether they are being moved
var el = null; // the element being moved

// add event to capture mouse events (function edited out for conciseness)
addEvent(document, 'mousemove',
function(e){
if (down === true) {
getPos(e)
}
}, false);

// track when the mouse button is released
addEvent(document, 'mouseup', unclick, false);

// make the test element clickible
addClickible(document.getElementById('dd1'));

// End Hide -->
</script>

</body>

</html>


Any help is greatly appreciated
_Scut

Browser: Mozilla Firefox V3.6

OS: Microsoft Windows 7 RC

Email   Website
Feb 3rd, 2010 - 5:21 PM
s
scutterman
Feb 4, 2010 - 12:25PM
Re: addEventListener/attachEvent seems to detach itself

Okay, I worked out what the problem was. I was also moving another box at the same time (the box that was going to have content in) but I forgot to adjust for the height of the first box, so the moveable box was going behind the content box and blocking the click event.

_Scut

Browser: Mozilla Firefox V3.6

OS: Microsoft Windows 7 RC

Email   Website
Feb 4th, 2010 - 12:25 PM
Return to Website  > Index