HI,
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: https://forum.webix.com/discussion/35630/way-to-prevent-dashboard-panels-from-being-moved (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.
Thanks.
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: https://snippet.webix.com/a8zodwxi. 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.:
webix.protoUI({ name:"c-dashboard", isDragNode:function(target){ 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(e.target)) 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:
webix.ui({ id: "dashboardView", view:"c-dashboard", gridColumns:48, gridRows:48, 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.promise.all([ webix.ajax().get("/api/dashboard/" + id + "/widgets") ]).then(function(result) { let widgets = result[0].json(); for (const widget of widgets) { buildWidget(widget); } }); };
Finally each panel is built using addView of c-dashboard (defined in protoUi, above):
let buildWidget = function(widget) { let widgetId = "widget_" + widget.id; $$("dashboardView").addView({ 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: widget.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; console.log(x,y); }); $$("dashboardView").attachEvent("onAfterDrop", function(id){ if (id.dashboard.x === x && id.dashboard.y === y) { return false; } console.log("Foo..."); });
after the for loop in dashboardInit(). Neither event gets triggered in either case.
Thanks.
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.