This is a migrated thread and some comments may be shown as answers.
Draggable gint
1 Answer 44 Views
This is a migrated thread and some comments may be shown as answers.
Gabriel
Top achievements
Rank 1
Gabriel asked on 17 Feb 2012, 06:01 AM
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?

1 Answer, 1 is accepted

Sort by
0
Gabriel
Top achievements
Rank 1
answered on 22 Feb 2012, 12:27 AM
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>')
               }
           });
       }
Asked by
Gabriel
Top achievements
Rank 1
Answers by
Gabriel
Top achievements
Rank 1
Share this question
or