dragAndDrop()

Enable drag and drop for the object.

Description

Enable drag and drop for the object. This adds event handlers and everything automatically. You can pass in an optional object of callback functions if you want something to happen during the drag and drop. Passing in false to the method will remove all the event handlers and disable drag and drop for the object.

Arguments

options : Object or Boolean

An optional object of the desired options. Property names can be start, move, end, changeZindex and bubble. The first three are callback functions that will be called in different stages of the drag and drop. The this keyword inside of the callbacks will refer to display object itself.
If the property changeZindex is set to true, the object will get a new zIndex value when the dragging starts, to appear in front of the other objects.
If the property bubble is set to false, the events used by the drag and drop functionality will not bubble out further out in the parent chain.
If false is passed in to the method, the drag and drop is disabled for the object.

Return Value

displayObject. Returns the display object itself.

Examples

Example 1

We create a new core instance and a rectangle that we add to the canvas. Then we call the dragAndDrop() method, which adds all the necessary event handlers to enable drag and drop.

var canvas = oCanvas.create({
	canvas: "#canvas",
	background: "#ccc"
});

var rectangle = canvas.display.rectangle({
	x: 77,
	y: 100,
	width: 200,
	height: 100,
	fill: "#000"
});

canvas.addChild(rectangle);

rectangle.dragAndDrop();

Example 2

We create a new core instance and a rectangle that we add to the canvas. Then we call the dragAndDrop() method, which adds all the necessary event handlers to enable drag and drop. We pass an object of callbacks to that method, which will set the different colors in the different states.

var canvas = oCanvas.create({
	canvas: "#canvas",
	background: "#ccc"
});

var rectangle = canvas.display.rectangle({
	x: 77,
	y: 100,
	width: 200,
	height: 100,
	fill: "#000"
});

canvas.addChild(rectangle);

rectangle.dragAndDrop({
	start: function () {
		this.fill = "#ff0";
	},
	move: function () {
		this.fill = "#0f0";
	},
	end: function () {
		this.fill = "#f00";
	}
});