KineticJS inherently supports dragging of elements, but what if you need “Drop” as well, sure you may drop anything anywhere on the stage but most of the times we want to be able to drop stuff in a pre-defined position and then apply some transformation. This is an example how we can achieve something like this easily.
Here is a codepen DEMO:
See the Pen Kinetic JS drag n drop by Michael Dobekidis (@netgfx) on CodePen.
So let us break it down and see how it is constructed.
This is a nice solution for a problem occured when making strategy games or wireframe applications. Or generally when we want to select multiple items and have them in a visible group.
It is a rather simple solution once the math make sense.
Here’s a nice example I made on codepen. Simply click and drag to form a rectangle around one or both of the objects.
See the Pen Multiselect drag by Michael Dobekidis (@netgfx) on CodePen.
A happy HTML5 game for Easter, it was developed in under 8 hours with JQuery/UI, HTML5 canvas, and TweenMax from Greensock for the rendering and animation stuff.
Background is from April Wallpapers of Smashing Magazine!
Egg graphics are from MediaLoot freebie set of easter-eggs!
Font is Luckiest-Guy from Google web-fonts!
Tweet if you liked it, and feel free to comment here if you have any questions about the implementation or your high-scores!
As always… Enjoy!
Adding drag and drop support for Group components, as well as swapping of children or reorder.
This might seem like a straightforward issue and an easy solution, but as I found out… only list based views have the ability to re-arrange their children via dragging and droping. But there is one hidden gem, all the Group based components have build-in support for drag and drop operations, and whilst the user cannot enable directly the dropEnabled option (which allows the re-arrange like operation), it is fairly easy to create a custom functionality to imitate it.
So I thought to post a simple way to make a draggable panel, actually this can be implemented in every container component. You just create a custom component of the container of your choise and place the following code, then you can simply reference your component (named MovingPanel for example) as:
<local:MovingPanel width=”400″ height=”200″/>
<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Panel xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute” width=”400″ height=”300″ creationComplete=”initDrag(event)” dropShadowEnabled=”false” alpha=”1.0″ backgroundAlpha=”1.0″ backgroundColor=”#FFFFFF” borderAlpha=”1.0″>
var clickX, clickY;
public var f:DropShadowFilter = new DropShadowFilter(5,90,0×000000,.70,9,9);
public var myFilters:Array = new Array();
public function initDrag(e)
dragger = this.titleBar;
public function beginDrag(e)
clickX = e.localX;
clickY = e.localY;
this.filters = myFilters;
public function dragIt(e)
this.x = e.stageX-clickX;
this.y = e.stageY-clickY;
public function endDraging(e)
this.filters = null;
// super.shadowDistance = 0;