Draggable gint

[Gabriel]

EDIT: draggable gint should be draggable hint.

I have a series of DIVs that contain an image + text + some other stuff. Each of these DIVs have the ID "item_" followed by a number.

To make these draggable, I loop through how many DIVs and do the following:

for (var i = 0; i < $('.titleData').length; i++) {

$("#item_" + i).kendoDraggable({

hint: function () {

return $("#item_" + i + ' img').clone();

}

});

}

Problem is, no drag image is shown. If say I have 5 items, "i" in the above loop is always equal to the last item + 1 when debugging (when an item drag starts). No image is shown, not even the square with red X in IE.

If I give it a specifc name (bogus path gives the red X) or do something like below, it works but it is not what I'm after.

return $('<img src="' + getRootDomain() + '/images/slicks/' + $("#titem_" + i).attr('data-sku') + '.jpg"></img>')

How would I do it so EACH item has its OWN image and don't all have the same?

[Gabriel]

Fixed it. Here it is if anyone else comes across this.

// Apply a Kendo drag control on all the items.

       for (var i = 0; i < $('.item').length; i++) {

           $("#item_" + i).kendoDraggable({

               hint: function (e) {

                   return $('<img class="dragSlick" src="' + getRootDomain() + '/images/slicks/' + e.attr('data-sku') + '_medium.jpg"></img>')

               }

           });

       }