Drag item from Kendo Panel Bar

[Hugo]

I have a panel bar with a list of item which have an image and a name. I'm trying to implement kendoDraggable to this Panel bar and what I do is:

$('#teamStatsPage #teamPlayersDiv').kendoDraggable({
        filter: 'li span.k-header',
        hint: function (item) {

            //parse HTML to get player ID
            var currentPlayerHTML = $.parseHTML(item.context.innerHTML);

            return $(item).clone().css({ background: "#CCCCCC", height: "30px", width: "200px", opacity: "0.5", border: "1px solid #666666", "text-align": "center" }).html(item[0].innerText).attr("data-id",$(currentPlayerHTML)[1].attributes[0].value);

        },
        dragend: draggableOnDragEnd,
        dragstart: draggableOnDragStart
    });

In Chrome and IE this is working because on kendoDropTarget I can get the data-id, but in Firefox it doesn't work. 

Each item list have this format:

<span class="k-link k-header"
        <img class="k-image" alt="" src="http://srvprd.blob.core.windows.net/xxx/20110.jpg">
         <span data-id="1302">John</span>
         <span class="k-icon k-i-arrow-s k-panelbar-expand"></span>
</span>

[Atanas Korchev]

Hi Hugo,

We are not sure what exactly isn't working in Firefox. 

Perhaps it is getting the data-id? If yes you can try this code:

hint: function(item) {
       var id = item.find("span:first").attr("data-id");
}

If this is not the case please clarify what the actual problem is. You can use http://www.jsbin.com to prepare a live demo (Kendo UI is available in the list of available JS frameworks).

Regards,
Atanas Korchev
Telerik