0

I use jQuery UI drag&drop functions to select images an album. The images ID straged in the rel parameter, what I need to copy to an input element after image drop.

Here is the image list. Using draggable

<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 here:

<div id="dropzone">
    <div id="imgcontainer"></div>
    <input type="text" name="img_id" id="img_id" />
</div>

The droppable JS code is here:

$('#dropzone').droppable({
    hoverClass: 'bgSelected',
    drop: function(event, ui) {
        $(this).html(''); // to remove any other stuffs
        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) );
    },
});

And the img.prop('rel') return with empty string. I tried to use img.attr('rel'), but that return an object element. How can I get the "rel" value?

Jonathan Leffler
  • 730,956
  • 141
  • 904
  • 1,278
netdjw
  • 5,419
  • 21
  • 88
  • 162

3 Answers3

2

you can use attr insted of prop. like ..

$(function() {
  $('#dropzone').droppable({
    hoverClass: 'bgSelected',
    drop: function(event, ui) {
         var img = ui.draggable;
        //alert($(ui.draggable));
        var id =img.attr('rel');


    $(this).html(''); // to remove any other stuffs

     $('<img src="'+img.prop('src')+'" title="'+img.prop('title')+'">').appendTo( $(this) );
      $('<input type="text" name="img_id" id="img_id" value="'+id+'" />').appendTo( $(this) );
    },
  });

this is a fiddle link http://jsfiddle.net/fLJuB/19/

Anant Dabhi
  • 10,864
  • 3
  • 31
  • 49
0
alert($("#img").attr("rel"));

if you use .attr("rel").text() it won't work.

levi
  • 3,451
  • 6
  • 50
  • 86
0

Maybe you can use some jquery selector if you get other properties in the object with ui.draggable. For example, if img.prop('src') returns src attribute right, you can use it to select the image with jquery attribute selector

alert($('img[src="' + img.prop('src') + '"]').attr('rel'));

EDITED: Hi think this works fine -> link

Tux9R
  • 37
  • 3