how to 'sticky' drag and drop?

Hi, I'm trying to find a way how to manually make object dragging on 'onClick' event.

Idea's simple, instead of real dragging, it should start dragging when I click on it and clicking second time, it should call drop event.

Any ideas how to do that?

Has invited:


Favor from: lijh warlockn

You can implement it using the following code.

qc.stickDragNode = null;

// define a user behaviour
var StickyDrag = qc.defineBehaviour('qc.engine.StickyDrag', qc.Behaviour, function() {
}, {

// Called when the script instance is being loaded.
StickyDrag.prototype.awake = function() {
this.addListener(, this.onCursorMove, this);

StickyDrag.prototype.onClick = function(event) {
if (this.inDrag) {
qc.stickDragNode = null;
this.inDrag = false;
else if (!qc.stickDragNode) {
qc.stickDragNode = this.gameObject;
this.inDrag = true;
var point = this.gameObject.parent.toLocal(event.source);
this.offsetX = point.x - this.gameObject.x;
this.offsetY = point.y - this.gameObject.y;


StickyDrag.prototype.onCursorMove = function(x, y) {
if (qc.stickDragNode !== this.gameObject)
var point = this.gameObject.parent.toLocal(new qc.Point(x, y));
this.gameObject.x = point.x - this.offsetX;
this.gameObject.y = point.y - this.offsetY;


Favor from:

Hello, you can look into this to make drag and drop event, and we also attach demo in it, you can download and have a look.


Favor from:

I think you don't get me well. I want something like:

this.addListener(o.onClick, self._onDragStart, self);
to add onDragStart event on onClick. Is this possible?
e.g phaser have startDrag() function, while I'm unable to locate anything similar.


Favor from:

Please look into , see if it is what you want,




Favor from:

it is, indeed but how can I fire that events from click event?
here's example, I hope you'll understand more.
MyController.prototype.onClick = function(e) {
console.log('click: ' + this._uuid, e);
// I want drag to happen here
if(this.isStickyDragging == true) {
this.onDragEnd(e); // wrong! how can I fire this?
this.isStickyDragging = false;
} else {
this.onDragStart(e); // again, wrong! it needs to be fired.
this.isStickyDragging = true;
MyController.prototype.onDragStart = function(e) {

console.log('onDragStart: ' + this._uuid, e);

// record current position and mark drag start
this.oldPos = new qc.Point(this.gameObject.x, this.gameObject.y);
this.drag = true;
this.drop = false;

MyController.prototype.onDrag = function(e) {

console.log('onDrag: ' + this._uuid, e);

if (this.drag) {
// change node position
var p = this.gameObject.getWorldPosition();

p.x += e.source.deltaX;
p.y += e.source.deltaY;
p = this.gameObject.parent.toLocal(p);

this.gameObject.x = p.x;
this.gameObject.y = p.y;

MyController.prototype.onDragEnd = function(e) {

console.log('onDragEnd: ' + this._uuid, e);

// finish dragging
this.drag = false;

if (!this.drop) {
// not droppable, reset to original position
this.gameObject.x = this.oldPos.x;
this.gameObject.y = this.oldPos.y;


Favor from:

Thank you! exactly what  wanted! :)

To reply to a question, please Login or registered