Detect when panel has been moved within dashboard.


Is there a way to detect when an existing panel has been moved on a dashboard?

In other words, I'd like to fire an event when a panel's position has changed.

I know you can use $dragCreate to stop panels from being movable: (which we are using).

And that there is also a $dragDestroy method that seems to get fired off when a panel has dropped.

I'm not sure what to do from here, however.



  • edited July 2019

    Hey @mcmurphy510, we can use native dashboard events like onBeforeDragIn and onAfterDrop to track the position of our dragged panel. Please take a look at this example: If the poition of the panel was changed you'll get a message, if the position stayed the same nothing happens.

  • Hi @Dzmitry,

    Thanks for the answer, but it does not work for what we are doing.

    We are using this method to conditionally stop the dashboard panels from being moved.:

            var css = (target.className || "").toString();
            //check for webix header and look up
            if (css.indexOf("panel_drag_icon") != -1)
                return target;
            if (target.parentNode && target != this.$view)
                return this.isDragNode(target.parentNode);
            return false;
        $dragCreate:function(object, e){
            //check for header
            if (!this.isDragNode( return false;
            //if ok, call parent logic
            return webix.ui.dashboard.prototype.$dragCreate.apply(this, arguments);
    }, webix.ui.dashboard);

    We then create an empty c-dashboard:

        id: "dashboardView",
        cellHeight: 50, 
        cellWidth: 50,
        autoplace: false

    To populate the c-dashboard with panels, this method gets called from the onChange of a richselect:

    let dashboardInit = function(id)  {
            webix.ajax().get("/api/dashboard/" + id + "/widgets")
        ]).then(function(result)  {
            let widgets = result[0].json();
            for (const widget of widgets)  {

    Finally each panel is built using addView of c-dashboard (defined in protoUi, above):

    let buildWidget = function(widget)  {
        let widgetId = "widget_" +;
            view: "panel",
            id: widgetId,
            css: "outerWidgetPanel",
            x: widget.x,
            y: widget.y,
            dx: widget.dx,
            dy: widget.dy,
            resize: true,
            body: {  template: panelTemplate(widgetId)  },
        (async () =>  {
            const Module = await import("/src/js/widget/" + widget.type);
            let Widget = Module.default;
            let widgetInstance = new Widget(widget);
            widgets.push({  id:, widgetInstance  });

    I have tried to use onBeforeDragIn and onAfterDrop in the c-dashboard, as you show in your snippet. I have also tried using:

    $$("dashboardView").attachEvent("onBeforeDragIn", function(id)  {
            let x = id.dashboard.x;
            let y = id.dashboard.y;
        $$("dashboardView").attachEvent("onAfterDrop", function(id){
            if (id.dashboard.x === x && id.dashboard.y === y) {
                return false;

    after the for loop in dashboardInit(). Neither event gets triggered in either case.


  • Hi @Dzmitry,

    Any update on this?


  • edited July 2019

    Hi again @mcmurphy510, sorry for the late response, but it seems that these events (drag events of the dashboard view) were introduced in Webix version 6.3. So I would like to know if you are using an older version and if it would be possible for you to update it if that's the case. The snippet I provided should work just fine in that case.

    Either way, if the issue still persists, it would be really helpful if you could provide a small sample via a snippet tool.

Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!