Kanban DND Events, JavaScript Programming Example of Kanban DND Events

JavaScript Programming Example of Kanban DND Events

In Webix Kanban, you can drag-n-drop items with tasks from one column to another. It's also possible to forbid all DND operations. Check out a free coding sample of Kanban DND Events below. Feel free to take advantage of it for your project.

JS Code

webix.ready(function(){
  if (!webix.env.touch && webix.env.scrollSize)
    webix.CustomScroll.init();

  webix.ui({
    view:"kanban",
    id: "myBoard",
    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"}
      }
    ],
    on:{
      onAvatarClick: function(id){
      	webix.message("Avatar for item "+id+" was clicked");
      }
    },
    userList:true,
    data: full_task_set,
    tags: tags_set,
    users: users_set
  });
});

HTML Code

<script src="https://docs.webix.com/samples/63_kanban/common/data.js"></script>
<script>
var imagePath = "https://docs.webix.com/samples/63_kanban/common/imgs/";
var users_set = [
	{id:1, value:"Rick Lopes", image:imagePath + "1.jpg"},
	{id:2, value:"Martin Farrell", image:imagePath + "2.jpg"},
	{id:3, value:"Douglass Moore", image:imagePath + "3.jpg"},
	{id:4, value:"Eric Doe", image:imagePath + "4.jpg"},
	{id:5, value:"Sophi Elliman", image:imagePath + "5.jpg"},
	{id:6, value:"Anna O'Neal"},
	{id:7, value:"Marcus Storm", image:imagePath + "7.jpg"},
	{id:8, value:"Nick Branson", image:imagePath + "8.jpg"},
	{id:9, value:"CC", image:imagePath + "9.jpg"}
];
</script>