Menu
Let me say right off, I am a newbie. So apologies if this issue has been addressed before. I tried seraching for an answer, but I am not even sure of which terms to search for.
I am totally new to Javascript, and I was just experimenting with trying to create a drag and drop feature. I am using JQuery. I created a <span> and then had a javascript function create several DIV’s in the span, stacked above each other. Each DIV contains a small image.
The idea was for the user to drag on one of the DIV’s and change it’s position in the stack – kind of like the “layers” palatte in Photoshop, where you can drag a layer up or down to determine it’s position in the stack.
How I tried to do it was to fill an array with some HTML snippets containing the DIV and IMG tags, and then pass that array to a function that first wipes out any DIV and IMG tags on the page, and then inserts the HTML snippets into the SPAN in the body.
From that point, it is all about mouse events – I see if the user creates a mousedown event on one of the DIVs and then check to see if that is followed by a mousemove event. If the user drags the DIV, the order of the elements in the array is changed to reflect the new order of the stack.
Once this has been done, the same function is called to wipe out the existing HTML, and create new HTML based on the new order of HTML elements in the array – just the way it was done when the page loaded.
The problem is, although the mouse events work fine on the initially created DIV’s, once a drag happens, and the old HTML is wiped out to be replaced by the new HTML, none of the DIVs respond to mouse events. The page is dead.
While debugging, I had placed a lot of “alert” statements in the code to display the HTML before and after a drag, and it all seems correctly formatted. It just seems that the DIV’s that are created the second time don’t respond.
One test I did do was to comment out the two lines at the top of the function that delete the old DIV and IMG tags before inserting the new. When I did this, the old code remained, with the new code prepended onto it. The old DIVs still responded to the mouse events, while the new DIVs above would not. Even though they are identical.
I am sure this is a newbie dumb error, but I am having trouble tracking down the cause of the problem. The stripped-down code is below, in order to show the problem. My apologies if I have provided too much – I don’t consider myself knowledgeable enough yet to know what to show and what to leave out. I also notice that my indents in the code below went a little out of whack in this post, even though they are aligned well in Dreamweaver. Any help would be appreciated. And please don’t laugh at my coding practices or skills, as I have neither yet!?
[CODE]<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
“http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
<title>Example Problem</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″>
<script type=”text/javascript” src=”salvation_files/jquery.js”></script>
<script type=”text/javascript”>
$(document).ready(function()
{
function orderimages(images)
{
$(‘img’).remove();//remove all IMG tags from the page
$(‘div’).remove();//removes all the DIV tags from the page
for(var i=0;i<(images.length);i++)
{
$(‘#idex’).prepend(“<div id=’place_”+i+”‘ class=’lister’><div class=’biddy’>”+images[i]+”</div></div>”);//inserts HTML so each element of the images array, surrounded by two DIV’s, into the Span tag in the <body>
}
$(‘div.lister’).unbind(‘mousemove’);//stops a mousemove event over all DIV’s with class lister – effectively ending the “dragging” once an item has been dragged
};
var first='<img id=”first” src=”thumbs/image01.png” >’;//assigns a variable to the first of three images (each image should be 100px x 100px in size BTW)
var second='<img id=”second” src=”thumbs/image02.png” >’;//assigns a variable to the second of three images
var third='<img id=”third” src=”thumbs/image03.png” >’;//assigns a variable to the third of three images
var images=[first,second,third];//load the array with the three images
orderimages(images);//run the function above
$(‘div.lister’).mouseover(function()//change the background color of the DIV ifthere is a mouseover
{
$(this).css(‘background-color’,’#000000′);
})
$(‘div.lister’).mouseout(function()//set the color back on a mouseout
{
$(this).css(‘background-color’,’#00FFFF’);
})
$(‘div.lister’).mousedown(function(evt)//triggers on a mousedown
{ evt.preventDefault();//prevent any normal mousedown default action
var yPos=evt.pageY; //Get the Y position of the mouse
$(‘div.lister’).mousemove(function(evt)//triggers if the mouse moves while down
{
var yPosn=evt.pageY; //Get the Y position of the mouse as it moves
if(yPosn>(yPos+20)) ///checks to see if the mouse has moved down the page at least 20 pixels
{
if($(this).attr(‘id’)!=’place_0′) //checks to make sure the DIV that is being dragged is not already in the bottom position
{
var imageid=parseInt($(this).attr(‘id’).slice(-1)); //Get the ID number of the DIV which corresponds to the element number in the array
var temp1=images[imageid]; //set a temp variable to hold a copy of the array element at this number
var temp2=images[imageid-1]; //set a temp variable to hold a copy of the array element just before the one above
images.splice(imageid-1,1,temp1); //this line and the next basically just swap the two elements in the array
images.splice(imageid,1,temp2);
orderimages(images); //now call the function again which will wipe out all the DIV and IMG tags and re-create new HTML based on the new array order
}
}
if(yPosn<(yPos-20)) //checks to see if the mouse has moved up the page at least 20 pixels
{ var ender=images.length;
if($(this).attr(‘id’)!=’place_’+(ender-1)) //checks to make sure the DIV that is beuing dragged is not already in the top position
{
var imageid=parseInt($(this).attr(‘id’).slice(-1)); //Get the ID number of the DIV which corresponds to the element number in the array
var temp1=images[imageid]; //set a temp variable to hold a copy of the array element at this number
var temp2=images[imageid+1]; //set a temp variable to hold a copy of the array element just after the one above
images.splice(imageid+1,1,temp1); //this line and the next basically just swap the two elements in the array
images.splice(imageid,1,temp2);
orderimages(images); //now call the function again which will wipe out all the DIV and IMG tags and re-create new HTML based on the new array order
}
}
})//end of mousemove
})//end of mouseover
});//end of doc ready
</script>
<style type=”text/css”>
<!–
#idex {
background-color: #CCCCCC;
border: thin solid #000000;
position: absolute;
overflow: hidden;
height: 500px;
width: 250px;
left: 20px;
top: 20px;
}
.lister {
background-color: #00FFFF;
border: medium solid #0000FF;
overflow: hidden;
position: relative;
width: 244px;
height: 100px;
left: 0px;
}
.biddy {
background-color: red;
border: thin solid #FF33FF;
overflow: hidden;
position: relative;
height: 100px;
width: 100px;
left: 0px;
}
–>
</style>
</head>
<body>
<span id=”idex”></span>
</span>
</body>
</html>