Kinetic Drag drop

<html>
<body>
<div id=”container” width=”500″ height=”500″></div>
<script type=”text/javascript” src=”Kinetic.js”></script>
<script defer=”defer”>
function addcircle(layer){
var color=colors[colorIndex++];
if(colorIndex >= colors.length){
colorIndex=0;
}
var randx=Math.random()*stage.getWidth();
var randy=Math.random()*stage.getHeight();
var circle=new Kinetic.Circle({
x:randx,
y:randy,
radius:6,
fill:color
});
layer.add(circle);
}
var stage=new Kinetic.Stage({
container:’container’,
width:500,
height:500
});
var kayer=new Kinetic.Layer();
var colors= [‘red’, ‘orange’, ‘yellow’, ‘green’, ‘blue’, ‘cyan’, ‘purple’];
var colorIndex=0;
var layersArr=[];
for(var i=0;i<=10;i++){
var layer=new Kinetic.Layer();
layersArr.push(layer);
for(var n = 0; n < 1000; n++) {
addcircle(layer);
}

stage.add(layer);
}
stage.add(kayer);

stage.on(‘mousedown’,function(evt){
var circle=evt.targetNode;
var layer=circle.getLayer();
circle.moveTo(kayer);
layer.draw();
circle.startDrag();
});
</script>
</body>
</html>

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s