External Drag and Drop

You can activate items in an external list so they can be dragged to the Kanban board.

JavaScript

External drag and drop is available since version 2018.1.3197.

You can activate external items using DayPilot.Kanban.makeDraggable() method.

Example

<div>
    Drag items from this list to the Kanban board:
    <ul id="external">
        <li data-id="123"><span style="cursor:move">Task #10</span></li>
        <li data-id="124"><span style="cursor:move">Task #11</span></li>
    </ul>
</div>


<script>

function makeDraggable() {
  var parent = document.getElementById("external");
  var items = parent.getElementsByTagName("li");
  for (var i = 0; i < items.length; i++) {
      var e = items[i];
      var item = {
          element: e,
          remove: e,
          id: e.getAttribute("data-id"),
          name: e.innerText,
          text: "Details: " + e.innerText,
          barColor: "red",
          barBackColor: "white"
      };
      DayPilot.Kanban.makeDraggable(item);
  }
}

</script>