In my process, I utilize jQuery UI drag and drop functions to pick out images from an album. The images' ID is stored in the "rel" parameter, which I then need to transfer to an input element after dropping the image.
Below is a list of images that can be dragged:
<img src="01.jpg" title="image 01" rel="10" />
<img src="02.jpg" title="image 02" rel="11" />
<img src="03.jpg" title="image 03" rel="12" />
Drop the image here:
<div id="dropzone">
<div id="imgcontainer"></div>
<input type="text" name="img_id" id="img_id" />
</div>
The droppable JavaScript code is provided below:
$('#dropzone').droppable({
hoverClass: 'bgSelected',
drop: function(event, ui) {
$(this).html(''); // removing any other elements
var img = ui.draggable;
$('<img src="'+img.prop('src')+'" title="'+img.prop('title')+'">').appendTo( $(this) );
$('<input type="text" name="img_id" id="img_id" value="'+img.prop('rel')+'" />').appendTo( $(this) );
},
});
However, there seems to be an issue with retrieving the "rel" value using img.prop('rel'), as it returns an empty string. I have also attempted img.attr('rel'), but that seems to return an object element instead. What would be the correct way to extract the "rel" value?