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.