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!
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;