Drag-and-Drop Events in File Manager, JavaScript Programming Example of Drag-and-Drop Events in File Manager

Drag-and-Drop Events in File Manager

The coding sample below will enable you drag and drop items in File Manager. Note that the piece of code is free. Don't hesitate to use programming examples by Webix to create high-performance business web applications.

JS Code

var count = 1;
webix.ready(function(){

  webix.ui({
    view:"filemanager",
    id:"files"
  });
  $$("files").load("https://docs.webix.com/samples/64_file_manager/common/data.php");

  $$("files").attachEvent("onBeforeDrag",function(context,ev){
    webix.message("Drag-n-drop started: "+context.start);
    return true;
  });
  $$("files").attachEvent("onBeforeDragIn",function(context,ev){
    webix.message("Drag in "+context.target);
    return true;
  });
  $$("files").attachEvent("onBeforeDrop",function(context,ev){
    webix.message(context.source+" will be dropped to "+context.target);
    return true;
  });
  $$("files").attachEvent("onAfterDrop",function(context,ev){
    webix.message("Drop "+context.source+" to "+context.target);
    return true;
  });
});