Jump to content

draggable&droppable in pixi!


Recommended Posts

Hey Guys,


I am currently porting jQuery droppable & draggable to pixi.js.


A demo can be found here:



There are still some minor bugs when it comes to constrainments. This will be fixed soon.


I want to know if anyone is interested in this plugin.

Basically it behaves mostly like jquery.




var sprite = new PIXI.Sprite(texture);stage.addChild(sprite);sprite.draggable();
That's all you would have to do.


Only draggable along the x-axis:


var sprite = new PIXI.Sprite(texture);stage.addChild(sprite);sprite.draggable({ axis: "x" });

Grid behaviour:


var sprite = new PIXI.Sprite(texture);stage.addChild(sprite);sprite.draggable({  grid: [ 50, 50 ]});

Full list of options:


{    axis: null,    containment: null,    cursor: "inherit",    cursorAt: null,    grid: false,    handle: null,    cancel: null,    helper: "original",    alpha: 1,    revert: false,    revertDuration: 500,    label: null,    snap: null,    snapMode: "both",    snapTolerance: 20,    disabled: false,    drag: null,    start: null,    stop: null}

Drag & Drop:

var item = new PIXI.Sprite(texture);stage.addChild(item);item.draggable({  label: "item"});var bagslot = new PIXI.Sprite( ... );bag.addChild(bagslot);bagslot.droppable({ accept: "item" });


Various demos can be found here:


I'm asking because I want to know how many people would actually want such a drag&drop feature for pixi out of the box. If there are enough people who want it, then maybe we could actually merge this into the newest pixi :)

Link to comment
Share on other sites

Hey Guys,

I'm currently looking to get this done without any core changes to pixi.

I'm not yet sure when to collect the draggables/droppables though. I want to avoid looping over all interactive elements everytime.

Maybe I can just overwrite the InteractionManager prototype in my plugin or collect the sprites on drag start, not sure yet.


Yep, constrainment doesn't fully work yet.

Link to comment
Share on other sites



Fixed containment issue.



"Constrain movement" Demo :)


You can constrain the movement to only horizontal movement, only vertical movement or within an other element, rectangle or the direct parent.

sprite.draggable({ containment: "parent" });

If the containment does have an hit area set, we will check against the hitarea instead of the bounds. That's a really convenient way to work with DisplayObjectContainers, which width/height is dynamic and would change while dragging.


I still need to take object rotation into account.


Also I have added a distance property to the options object,

sprite.draggable({ containment: "parent", distance: 10 });

Using the distance property, you can define a minimum delta for objects to be dragged. This is internally set to 1.

In the above example that means that you have to drag the element at least 10 pixels before the drag happens.


You can see a demo of that behaviour in the "Events" example.


Now all that is left to do is to avoid editing the pixi core and to add rotation.


There have also been added 4 intersection modes. The examples can be found at the "Drop Tolerance" button.

/* intersect: standard behaviour - drop when draggable item is dragged at least half into the droppable container */droparea1.droppable({ tolerance: "intersect" });/* fit: draggable must be completely inside the droppable */droparea2.droppable({ tolerance: "fit" });/* pointer: the mouse cursor must be over the droppable */droparea3.droppable({ tolerance: "pointer" });/* touch: the draggable only has to touch the droppable area */droparea4.droppable({ tolerance: "touch" });
Link to comment
Share on other sites



And it's published!




Simply grab the pixi.draggable.js and load it after your pixi.js file.

I'm trying to find the time to create some examples/tutorials/nice demos this weekend.


If you already know jquery's draggables&droppables you should have an easy time getting this to work.


I still need to fix some rotation and hitArea stuff, but I can do that at the weekend.



Link to comment
Share on other sites

Demo time!

I've just created a really simple demo:



http://mokgames.com/playground/pixi/draggable/demo2.html (advanced demo)


You have a bag and a skillbar.

Items from your bag can be dragged to your skillbar.

However, the bag doesn't accept skills in it's slots.


This is done by defining the following:


skillbarSlot.droppable({  label: "slot",  accept: [ "item", "skill" ],  drop: function(item)  {    this.parent.addChild(item);    item.dropX = this.x + 3;    item.dropY = this.y + 3;  }.bind(skillbarSlot)}) 
The bag slots being defined as:


bagSlot.droppable({  label: "slot",  accept: "item",  drop: function(item)  {    this.parent.addChild(item);    item.dropX = this.x + 3;    item.dropY = this.y + 3;  }.bind(bagSlot)});
The items are defined as:

item.draggable({  label: "item",  revert: "invalid",  revertDuration: 0,  helper: "clone",  stop: function(item)  {    if(item.dropX)    {      item.x = item.dropX;      item.y = item.dropY;    }  }});
And skills are defined as:

skill.draggable({  label: "skill",  revert: "invalid",  revertDuration: 0,  helper: "clone",  stop: function(item)  {    if(item.dropX)    {      item.x = item.dropX;      item.y = item.dropY;    }  }});
Isn't it loveable how easy something like this can be done?


I will keep working on this plugin. There are quite a few other options that should be added.

Maybe i can improve this demo at the weekend! :)


Also check out this demo:


I'm working on a new drag & drop feature. Batching!

What makes it different from regular drag & drop?

Let's say you have a bag. Just like in demo 1 / demo 2.

Your bag has 6 pages.

Each page can contain 6 x 6 items, a total of 36 items per page.

Now if your bag is completely filled, that are 36 x 6 = 216 draggable sprites!

Each sprite would be added to the interactive graph and would have 8 interactive events (mousedown, touchstart, mousemove, touchmove, mouseup, touchend, mouseupoutside, touchendoutside).

Under the hood of pixi, each element is is looped through and tested on each user interaction.

If you click somewhere on your stage, it would loop through all 216 draggable sprites just to find out if any of them has been clicked or not. Also the hit test itself is quite expensive.

It's entirely wasted if none of the sprites has been clicked on.

Using a batch, only 1 item is draggable / interactive.

If the mousedown happened on that 1 item, then the batch will kick in and based on the batch handler, the batch target will be looked up.

I guess that is a bit much to understand for now, so I will just push another demo as soon as the batch mode is completed. :)

Link to comment
Share on other sites

  • 2 weeks later...
  • 1 year later...

Hey there,

Sorry to resurrect an old thread. I'm currently using this draggable library in my game but am having no luck getting the 'clone' option working for helper. 

My console is reading:

"pixi.min.js:6 Uncaught Error: Unable to create RenderTexture, you must pass a renderer into the constructor."


followed by (which I assume is related):


"pixi.draggable.js:585 Uncaught TypeError: Cannot read property 'worldTransform' of undefined"


Any idea why this might be? 

Thanks in advance.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...