4 Replies - 982 Views - Last Post: 20 June 2012 - 07:02 PM

#1 drayarms   User is offline

  • D.I.C Head

Reputation: 4
  • View blog
  • Posts: 199
  • Joined: 18-May 11

How Can Elements Generated on the Fly be Made Draggabble?

Posted 20 June 2012 - 12:32 PM

I'm using the script below to generate a set of images on the fly(image names correspond to the names of elements in an array which I call array1). I also give each image an id that is the image's src value, or corresponding array element value.I know you are probably asking yourself why i can't just assign the id names in the HTML image tag. Reason is, each time i run the program, a different random set of array elements are chosen (array 1 is actually created from a larger array. the 3 elements making up array1 are randomly selected from that larger array) and their corresponding images need to be appended to the DOM

array1 = ['image1', 'image2', 'image3'];//Created on the fly from a larger array

for(i=0; i<array1.length; i++){//Generate an image for each element in array1

	$("#image_container").append("<img id = ' "+array1[i]+" ' class = 'images' width = '86px' height = '128px' src =' "+array1[i]+".png'/>");

}







I'm trying to use jQ UI to make all 3 images draggable(I can't use inline HTML5 statements for the same reason why I have to generate the ids on the fly as explained above). But I just can't figure out how to accomplish this, since there is no way of telling before the program is run, which images will be presented. Here's what I tried which didn't work


example1

jQuery.each(array1, function(i,val){//The idea is to iterate the array and get the names of each element which is also the id of corresponding image
 

	$( init );
 
	function init() {  

  		$('#'+val).draggable(); 
	}

});




example2

$('.images').mouseover(function() {

   var id = $(this).attr('id');	

	$( init );
 
	function init() {  

  		$('#'+id).draggable(); 
	}

});





HTML

<img src = 'image1'/>


<img src = 'image2'/>


<img src = 'image3'/>



Is This A Good Question/Topic? 0
  • +

Replies To: How Can Elements Generated on the Fly be Made Draggabble?

#2 VolcomMky   User is offline

  • D.I.C Regular

Reputation: 74
  • View blog
  • Posts: 315
  • Joined: 13-May 09

Re: How Can Elements Generated on the Fly be Made Draggabble?

Posted 20 June 2012 - 01:58 PM

After items are generated, recall the
$('#'+id).draggable();

to set the new items to drag
Was This Post Helpful? 1
  • +
  • -

#3 e_i_pi   User is offline

  • = -1
  • member icon

Reputation: 879
  • View blog
  • Posts: 1,893
  • Joined: 30-January 09

Re: How Can Elements Generated on the Fly be Made Draggabble?

Posted 20 June 2012 - 02:08 PM

Alternately, once the document is ready, you could select by using the parnet's id and the images common class, like this:
$('#image_container > .images').draggable();


Was This Post Helpful? 1
  • +
  • -

#4 drayarms   User is offline

  • D.I.C Head

Reputation: 4
  • View blog
  • Posts: 199
  • Joined: 18-May 11

Re: How Can Elements Generated on the Fly be Made Draggabble?

Posted 20 June 2012 - 06:54 PM

View PostVolcomMky, on 20 June 2012 - 01:58 PM, said:

After items are generated, recall the
$('#'+id).draggable();

to set the new items to drag

Do you mean I should change this line

for(i=0; i<array1.length; i++){//Generate an image for each element in array1


    $("#image_container").append("<img id = ' "+array1[i]+" ' class = 'images' width = '86px' height = '128px' src =' "+array1[i]+".png'/>");

 

}




to this one?
for(i=0; i<array1.length; i++){//Generate an image for each element in array1
 
    $("#image_container").append("<img id = ' "+array1[i]+" ' class = 'images' width = '86px' height = '128px' src =' "+array1[i]+".png'/>");

$('#'+array1[i]).draggable();
 
} 

Was This Post Helpful? 0
  • +
  • -

#5 drayarms   User is offline

  • D.I.C Head

Reputation: 4
  • View blog
  • Posts: 199
  • Joined: 18-May 11

Re: How Can Elements Generated on the Fly be Made Draggabble?

Posted 20 June 2012 - 07:02 PM

View Poste_i_pi, on 20 June 2012 - 02:08 PM, said:

Alternately, once the document is ready, you could select by using the parnet's id and the images common class, like this:
$('#image_container > .images').draggable();



Works like a charm. Thanks
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1