having a play with some Drag and drop in javascript using yahoo's UI Classes.
now i've got it working in a static fashion where by a already have a div created and I set it to be draggable via javascript. I'm now wanting to make it a little more dynamic.
I've got a button that calls some javascript and creates div elements, i'm trying to make it so that all the new div elements that get created after the button click are als dragable but this is where i'm having problems.
heres my code so far
Righty, the bit inbetween the //------------- lines is code that will work but its not dynamic.
As you can see the id "concept_1" is the id of the divs. In the dynamic version this changes each time to concept_1, concept_2, concept_3 and so on.
my idea was to create the dragable element using
temp = new YAHOO.util.DD("concept_"+newCount);
then place the temp varable into an array like so
x[newCount]= temp;
i've used the for loop at the bottom which i've commented out to view the array and the new objects appear to be in their.
The problem I have now is that for some reason only the last created div is dragable. it's like its overwriting the existing objects when you create a new one.
Any ideas on what i'm doing wrong here ?
now i've got it working in a static fashion where by a already have a div created and I set it to be draggable via javascript. I'm now wanting to make it a little more dynamic.
I've got a button that calls some javascript and creates div elements, i'm trying to make it so that all the new div elements that get created after the button click are als dragable but this is where i'm having problems.
heres my code so far
Code:
function prepareCGElements(){
}
var conceptCount = 1;
x=new Array( );
var temp;
function addConcept(){
var className = 'concept_';
var newCount = conceptCount++;
className = className+newCount+'';
$("elementHolder").innerHTML += '<div id="'+className+'" class="concept">A Concept</div>'
$("test").innerHTML = newCount;
temp = new YAHOO.util.DD("concept_"+newCount);
x[newCount]= temp;
//------------------------------------------------------------------------------------------------
dd = new YAHOO.util.DD("concept_1");
dd.setXConstraint(1000, 1000, 25);
dd.setYConstraint(1000, 1000, 25);
dd2 = new YAHOO.util.DD("concept_2");
dd2.setXConstraint(1000, 1000, 25);
dd2.setYConstraint(1000, 1000, 25);
//-------------------------------------------------------------------------------------------------
//for(i=1;i<x.length; i++)
//{
// alert(x[i]);
//}
}
/***********************************************
This sets up the onLoad event for the page
***********************************************/
window.onload = prepareCGElements;Righty, the bit inbetween the //------------- lines is code that will work but its not dynamic.
As you can see the id "concept_1" is the id of the divs. In the dynamic version this changes each time to concept_1, concept_2, concept_3 and so on.
my idea was to create the dragable element using
temp = new YAHOO.util.DD("concept_"+newCount);
then place the temp varable into an array like so
x[newCount]= temp;
i've used the for loop at the bottom which i've commented out to view the array and the new objects appear to be in their.
The problem I have now is that for some reason only the last created div is dragable. it's like its overwriting the existing objects when you create a new one.
Any ideas on what i'm doing wrong here ?