Kanban DND Events, JavaScript Programming Example of Kanban DND Events

function onBeforeDrag(dragContext){
  webix.message("Drag has been started");
  return true
};

function onBeforeDragIn(dragContext,e,list){
  // item id
  var item = this.getItem(dragContext.start);

  // if we move an item from one list to another
  if(dragContext.from != dragContext.to){
    var statusFrom = dragContext.from.config.status;
    var statusTo = dragContext.to.config.status;
    var statusIndex = {"new":0,"work":1, "test": 2, "done":3};
    var diff = Math.abs(statusIndex[statusFrom] - statusIndex[statusTo]);
    if(diff>1){
      return false;
    }
  }
  return true;
};

function onAfterDrop(dragContext,e,list){
  // item id
  var item =this.getItem(dragContext.start);

  // if we move an item from one list to another
  if(dragContext.from != dragContext.to){
    var status = dragContext.to.config.status;
    // show a message with new status and order
    webix.message("Item '"+item.text+"' was moved into '"+status+"' column to the "+item.$index +" position");
  }
  else
    webix.message("Item '"+item.text+"' was moved to the "+item.$index +" position");
};

webix.ready(function(){
    webix.CustomScroll.init();

  webix.ui({
    type:"space",
    rows:[
      {  view:"label", label:"You can move tasks only between neighbouring columns"},
      {
        view:"kanban",
        id:"myBoard",
        type:"wide",
        on:{
          onListBeforeDrag: onBeforeDrag,
          onListBeforeDragIn: onBeforeDragIn,
          onListAfterDrop: onAfterDrop
        },
        cols:[
          { header:"Backlog",
           body:{ view:"kanbanlist", status:"new"}
          },
          { header:"In Progress",
           body:{ view:"kanbanlist", status:"work"}
          },
          { header:"Testing",
           body:{ view:"kanbanlist", status:"test"}
          },
          { header:"Done",
           body:{ view:"kanbanlist", status:"done"}
          }
        ],
        tags:tags_set,
        users:users_set,
        data:full_task_set
      }
    ]
  });
});