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'/>