draggable&droppable in pixi!

[Sebi]

Hey Guys,

 

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

 

A demo can be found here:

http://mokgames.com/playground/pixi/draggable/

 

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.

 

Example:

 

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:

http://mokgames.com/playground/pixi/draggable/

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

[Sebi]

I've just added the .droppable() examples. (blue buttons)

Maybe I can fix the constrainments bug today/tomorrow.

Any thoughts on this so far?

[gordyr]

It's a very welcome addition in my opinion.  Although it's not difficult to roll your own, it's nice to have this sort of stuff built in to Pixi.

[agamemnus]

Don't forget to check for edge cases where the moves out to the browser gui, while still pressing the mouse/screen, or if they tab out while still pressing.

[trueicecold]

This is freaking asweome, SebastianNette!

Some issues with the "constrain withint a box", though, the starting drag point is wrong. 

[Sebi]

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.

@trueicecold

Yep, constrainment doesn't fully work yet.

[Sebi]

Update:

 

Fixed containment issue.

http://mokgames.com/playground/pixi/draggable/

 

"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" });

[Sebi]

Update:

 

And it's published!

 

https://github.com/SebastianNette/PIXI.draggable

 

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.

 

Cheers

[Sebi]

Demo time!

I've just created a really simple demo:

 

http://mokgames.com/playground/pixi/draggable/demo.html

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!

edit:

Also check out this demo:

http://mokgames.com/playground/pixi/draggable/demo3.html

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.

[praneybehl]

That's a job well done. Thanks mate

[praneybehl]

The demo at : http://mokgames.com/playground/pixi/draggable/ for some reason doesn't render on safari for some reason.

[praneybehl]

Is it posible to use jquery-ui resizable as well?

[rtplol]

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.

[d13]

Which version of Pixi are you using?

v4.0 has a a different API for creating RenderTextures:

http://www.goodboydigital.com/pixi-js-v4/
I believe this library was written for Pixi v.2, and it hasn't been updated since... ?

Perhaps log an issue in the GitHub repo?