0

I'm trying to let the user drag list items to another unsorted list. I can "pick up" the list items, so the Draggable seems to work but when I release them above the DropTarget, they do not get added. I've added some events to check if both the Draggable and DropTarget are initialized correctly and it seems like they are.

HTML:

<ul id="recipe-steps">
    <li>Step 1</li>
    <li>Step 2</li>
    <li>Step 3</li>
</ul>
<ul id="available-steps">
    <li>Step 1</li>
    <li>Step 2</li>
    <li>Step 3</li>
</ul>

DropTarget JS code:

$("#recipe-steps").kendoDropTarget({
    dragleave: function (e) {
        e.draggable.hint.css("opacity", 1);
    },
    dragenter: function (e) {
        e.draggable.hint.css("opacity", 0.3);
    }
});

Draggable JS code:

$("#available-steps").kendoDraggable({
    filter: "li",
    ignore: "input",
    hint: function(element) { return element.clone(); }
});

So the use case here is that a user can drag a step from available-steps to recipe-steps.

Stephan Bisschop
  • 198
  • 1
  • 12
  • kendoDraggable and kendoDroptarget simply fire the events that tell you what was dropped and where. It is up to you to implement the code that manipulates the DOM. Are you in need of an example of that? – JFlox Oct 31 '17 at 20:02
  • Yes I've figured that one too. I inspected the documentation again and it isn't really clear that you should do this yourself. However, I managed to get it working. – Stephan Bisschop Nov 01 '17 at 15:48
  • Stephan or @JFlox , could you please provide example of this. I need it. I am having a Kendo grid which can be ordered(I tried KendoSortable for this) and have HTML tree(to where , i can drop any row from grid, here I am using HTML 5 dragging). HTML 5 dragging seems to not work with KendoSoratble feature. Could you please show me how you have implemented Draggable and Drop from grid to HTML. Thanks a lot. – Khushi Jul 12 '18 at 07:51
  • Hello Khushi, you should wrap your tree (I think you mean a KendoTreeView) in a KendoDropTarget and link your Draggables (aka your grid) to this DropTarget. I've not exactly built what you ask for, but the Kendo documentation has been updated and shows clearly how you can link two HTML components together. If you're going to use one Kendo component (grid) you might aswel use other components like the Draggable/DropTarget/TreeView/etc... – Stephan Bisschop Jul 24 '18 at 12:42

0 Answers0