This is a migrated thread and some comments may be shown as answers.

Drag item from Kendo Panel Bar

1 Answer 44 Views
Drag and Drop
This is a migrated thread and some comments may be shown as answers.
Top achievements
Rank 1
Hugo asked on 09 Dec 2013, 10:24 AM
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="">
         <span data-id="1302">John</span>
         <span class="k-icon k-i-arrow-s k-panelbar-expand"></span>

1 Answer, 1 is accepted

Sort by
Atanas Korchev
Telerik team
answered on 11 Dec 2013, 07:49 AM
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 to prepare a live demo (Kendo UI is available in the list of available JS frameworks).

Atanas Korchev
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Drag and Drop
Asked by
Top achievements
Rank 1
Answers by
Atanas Korchev
Telerik team
Share this question