Execute customized command on drag and drop in workspace




I have requirement like while drag and drop files in between existing folders of my work-space, I need to execute one build command, i mean, can i create new plugin to achieve that. If yes, how it cloud be, please help me on creating new plugin which will work when drag and drop files in between folders(not from my local windows machine to c9 workspace) of my workspace.



you can use drop handler on the tree, similar to what filetree itself does

but this way you will get notified, on mouseup, before copying of files is finished.


Thanks harutyun. But its not working, I want to show a alert message(actual is execute my own build command) when I started dragging a file or folder in my workspace(usually it appears in left pane of the c9 IDE).

I tried like this :

define(function(require, exports, module) {
    main.consumes = [
        "Plugin", "ui", "tree", "tabManager", "commands", "util","build","settings","fs","c9","preferences","run","util","proc","auth","vfs"
    main.provides = ["dragndrop"];
    return main;

    function main(options, imports, register) {
        var Plugin = imports.Plugin;
        var ui = imports.ui;
        var tree = imports.tree;
        var util = imports.util;
        var tabManager = imports.tabManager;
        var commands = imports.commands;
        var build=imports.build;
        var proc=imports.proc;
        var fs=imports.fs;
        /***** Initialization *****/
        var plugin = new Plugin("Ajax.org", main.consumes);
        // var emit = plugin.getEmitter();
        var loaded = false;
        function load() {
            tree.once("draw", dragndropfun);    
        /***** Methods *****/
        function dragndropfun() {
           tree.tree.on("drop", function(e) {
              alert("I will execute my build command here instead showing alert"); 
        /***** Lifecycle *****/
        plugin.on("load", function() {
        plugin.on("enable", function() {
        plugin.on("disable", function() {
        plugin.on("unload", function() {
            loaded = false;
        /***** Register and define API *****/
        register(null, {
            dragndrop: plugin

What I did wrong here, please explain me


do you see an error or nothing happens? Where did you put this code?


I din’t see any error , nothing happend on IDE, i kept this code in my sample.js file


where is your sample.js file? Most likely it was never loaded into the ide.


sample.js file is loading correctly, if I put alert statement in load function it is working fine.

Folder strucure :



i’ve made some changes to your example plugin, please try that


Nothing is coming as previous


is dragndropfun called?


dragndropfun called but tree.on is not called.


You mean the function inside

           tree.tree.on("drop", function(e) {

Where do you drop the files?


It’s not tree.tree , it’s simply tree.on(“drop”.function(e){ (By mistake I showed you like that , but I used correct one).

And drag and drop event I want to do in my workspace that is not under /plugins

It’s like /home/username/repos/workspace in my server (configuration path to c9 IDE) . So here under workspace i have two folders like FOLDER1 and FOLDER2 and want to execute my shell script when I drag and drop files in-between two folders.

Please let me know anything for better understanding of the goal.



function dragndropfun() {
tree.on(“drop”, alert(“alert in tree.on”));

This code is showing both the alerts “xyz” and “alert in tree.on” but event (drag n drop ) not working.

tree.tree.on("drop", function(e) {

is the correct version
and make sure you use

        tree.once("draw", dragndropfun);    

so that tree.tree is not undefined.


But event is not listing…like whenever I drag and drop files alert box is not showing…how to make that event listen


Thank you its working…will post if I din’t get anything.


tree.tree.on(“drop”, function(e) {
alert(“I will execute my build command here instead showing alert”);

is not working to show the file name or absolute path of the file which I have been dragging to drop some where.

My requirement is like I have 5 folders(fol1, fol2, fol3, fol4, fol5 say), I need to do something if dragndrop event occurred on files of fol1, fol2 and fol3.

So how can I find absolute path of selected file so that I can filter the Folder name and do my execution.

Tried with seleced, selectedNode, selectedNodes properties and dataTransfer methods like dataTransfer.File[0].name, etc. but no luck, It is showing Objects but how can i get values from that object.

alert(e.dataTransfer.files[0].path); is not working.


Oh I got this by browser debugger

by this code :

alert(e.selectedNodes[0].oldpath + " and " + e.target.label);


Hi, after event was handled it is going for default execution I used below code but still it propagates and error is coming so my customized plugin has no use.

e.returnValue = false;
e.cancelBubble = true;
return false;

here while debugging in browser e.stopImmediatePropagation(); is showing error and debugging not moving further. Please help us on this.