Raphael-Chart

Webix JS
#1

Hi,

I’m currently evaluating webex and so far everything is great. But there is one thing I didn’t succeed to accomplish dragging an item from a list to the raphael-chart component from your third-party integration components.

What I’m trying to emulate is to have a list of shapes in a component (ui.list) and the user can drag any shape from the list over the raphael-chart and where the shape is dropped, we draw a shape.

The problem is: I’m unable to setup the raphael-chart component to receive the drop event. I tried a lot of stuffs.

  • I tried to implement the drop
    Do you have any idea how to accomplish that?

Thanks.

#2

You can use webix.DragControl.addDrop to register any area as a drop target. Something like next can be used in your case

webix.DragControl.addDrop( $$("rchart").$view, {
		$drop:function(source, target, e){
			var context = webix.DragControl.getContext();
			var text = context.from.getItem(context.start).value;

			var pos = webix.html.pos(e);
			var box = webix.html.offset(target);
			var x = pos.x - box.x;
			var y = pos.y - box.y;

        webix.message(text + " dropped at "+x + ":" + y);
    }
});

Full sample
http://webix.com/snippet/8925295f