Drag item from Kendo Panel Bar

2 posts, 0 answers
  1. Hugo
    Hugo avatar
    28 posts
    Member since:
    May 2011

    Posted 09 Dec 2013 Link to this post

    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>

  2. Atanas Korchev
    Atanas Korchev avatar
    8462 posts

    Posted 11 Dec 2013 Link to this post

    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).

    Atanas Korchev
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top