Kendo UI DragAndDrop TreeView item to ListView

Question

У меня есть требование разрешить перетаскивание из дерева кендо-ui в шаблонное представление списка. Я попытался следующие:

1.Enabling DragAndDrop на TreeView и настройка ListView как kendoDropTarget

2.Disabling DragAndDrop на TreeView и вместо настройки, что контроль, как kendoDraggable к ListView сконфигурированной как kendoDropTarget

<div> 
<div id="treeview">   
</div></div> 


<div id="favorites-window" style="height:185px;width:1170px"> 
<div class="report-reader" style="height:185px;width:1170px;overflow:auto"> 
    <div id="listView"></div> 
</div>        
</div> 

    $("#favorites-window").kendoWindow({ 
    width: "1180", 
    height: "185", 
    resizable: false, 
    draggable: false,   
    actions: ["Custom"], 
    title: "Favorites" 
}); 
$("#listView").kendoListView({ 
    selectable: "single", 
    navigatable: false 
}).kendoDropTarget({ 
    drop: function (e) { 
     console.log(e); 
     var item = getObjects(nucleusTreeJsonData, 'text', e.draggable.hint.text()); 
     $("#listView").data("kendoListView").dataSource.add(item); 
    } 
}); 

var inlineDefault = new kendo.data.HierarchicalDataSource({ 
       data: [ 
        { text: "Furniture", items: [ 
         { text: "Tables & Chairs" }, 
         { text: "Sofas" }, 
         { text: "Occasional Furniture" } 
        ] }, 
        { text: "Decor", items: [ 
         { text: "Bed Linen" }, 
         { text: "Curtains & Blinds" }, 
         { text: "Carpets" } 
        ] } 
       ] 
      }); 


    $("#treeview").kendoTreeView({ 
     dragAndDrop: true, 
     dataSource: inlineDefault, 
     dataTextField: "text" 

    }); 
     //.kendoDraggable({ 
    // container: $("#tree-pane"), 
    // hint: function() { 
    //  return $("#treeview").clone(); 
    // }, 
    // dragstart: draggableOnDragStart 
    //}); 

    $("#treeview").data("kendoTreeView").bind("dragstart", function (e) { 
     if ($(e.sourceNode).parentsUntil(".k-treeview", ".k-item").length == 0) { 
      e.preventDefault(); 
     } 
    }); 

    /*$("#treeview").data("kendoTreeView").bind("drop", function (e) { 
      e.preventDefault(); 
      var copy = this.dataItem(e.sourceNode).toJSON(); 
      if (e.dropPosition == "over") { 
       //var item = getObjects(nucleusTreeJsonData, 'text', e.sourceNode.textContent); 
       $("#listView").data("kendoListView").add(copy); 
      } 
    });*/ 

    $('ul.k-group.k-treeview-lines div').children().css('font-weight', 'bold').find('div').css('font-weight', 'normal'); 

Мне не повезло с этим. Пожалуйста, взгляните на мою скрипку. Любые предложения будут высоко оценены

http://jsfiddle.net/OhenewaDotNet/JQBZN/16/

Answer 1

Если набор инструментов KendoUI не делать то, что вы хотите, чтобы это сделать, вы можете найти его легче сделать то, что вы хотите сделать с JQuery UI. Они реализуют одну и ту же базовую библиотеку jQuery.

Если вы идете с пользовательским интерфейсом jQuery, это просто вопрос привязки «перетаскиваемого» к элементу, который вы хотите перетащить, и «droppable» для ваших целей. Оттуда вы можете подключить обработчиков, чтобы делать все, что угодно.

Я создал простой jsFiddle, демонстрирующий, как это будет работать:

http://jsfiddle.net/e2fZk/23/

код JQuery очень прост:

$(".draggable").draggable(); 
$(".container").droppable({ 
    drop: function (event, ui) { 
     var $target = $(this); 
     var $source = ui.draggable; 
     var newUrl = $source.find("input").val(); 
     alert("dropped on " + $target.attr("id") + ", setting URL to " + newUrl); 
     $target.find("#imageDiv").html("<img id='myImage' />") 
      .find("#myImage").attr("src", newUrl); 
    } 
}); 

Документация API здесь:

Draggable

Droppable

Answer 2

Я знаю, что это старый вопрос, но у меня тоже было это, поэтому я пошел дальше и понял это, используя эту скрипку.

http://jsfiddle.net/JQBZN/74/

Это действительно очень основной и, вероятно, ужасно, но архитектура я думаю, что по крайней мере демонстрирует ключевую точку (ы):

$("#treeview").kendoTreeView({ 
    dragAndDrop: true, 
    dataSource: inlineDefault, 
    dataTextField: "text", 
    drag: function (e) { 
     /* Manually set the status class. */ 
     if (!$("#treeview").data('kendoTreeView').dataItem(e.sourceNode).hasChildren && $.contains($('#favorites-window')[0], e.dropTarget)) { 
      e.setStatusClass('k-add'); 
     } else { 
      e.setStatusClass('k-denied'); 
     } 
    }, 
    drop: function (e) { 
     if (e.valid) { 
      /* Do your adding here or do it in a drop function elsewhere if you want the receiver to dictate. */ 
     } 
     e.preventDefault(); 
    } 
});