How Can Elements Generated on the Fly be Made Draggabble?
Posted: Wed Jun 20, 2012 2: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
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
example2
HTML
Code: Select all
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
Code: Select all
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
Code: Select all
$('.images').mouseover(function() {
var id = $(this).attr('id');
$( init );
function init() {
$('#'+id).draggable();
}
});
HTML
Code: Select all
<img src = 'image1'/>
<img src = 'image2'/>
<img src = 'image3'/>