Draggable gint

2 posts, 0 answers
  1. Gabriel
    Gabriel avatar
    79 posts
    Member since:
    Nov 2011

    Posted 17 Feb 2012 Link to this post

    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?
  2. Gabriel
    Gabriel avatar
    79 posts
    Member since:
    Nov 2011

    Posted 21 Feb 2012 Link to this post

    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>')
                   }
               });
           }
  3. Kendo UI is VS 2017 Ready
Back to Top