//variables //drag object size dragradius = 100; //destination size destheight = 434; destwidth = 220; var rosiedrag = new lib.rosiedrag(); //drag object creation //placed inside container hold both label , shape var test = new lib.test(); stage.addchild(test); test.x = 525; test.y = 1035; var dragger = new createjs.container(); dragger.x = 250; dragger.y = 460; dragger.addchild(rosiedrag); dragger.setbounds(100, 100, dragradius*2, dragradius*2); //dragradius * 2 because 2*r = width of bounding box var rosiedrop = new lib.rosiedrop(); var destination = new createjs.container(); destination.x = 900; destination.y = 240; destination.setbounds(950, 350, 100, 100); destination.addchild(rosiedrop); //drag functionality ===================== dragger.on("pressmove", function(evt){ evt.currenttarget.x = evt.stagex; evt.currenttarget.y = evt.stagey; stage.update(); //much smoother because refreshes screen every pixel movement instead of fps set on ticker if(intersect(evt.currenttarget, destination)){ evt.currenttarget.alpha=0.2; }else{ evt.currenttarget.alpha=1; } }); //mouse , snap==================== dragger.on("pressup", function(evt) { if(intersect(evt.currenttarget, destination)){ test.gotoandplay(5); dragger.x = destination.x + destwidth/2; dragger.y = destination.y + destheight/2; dragger.alpha = 1; stage.update(evt); } }); //tests if 2 objects intersecting //sees if obj1 passes through first , last line of //bounding box in x , y sectors //utilizes globaltolocal x , y of obj1 in relation //to obj2 //pre: must have bounds set each object //post: returns true or false function intersect(obj1, obj2){ var objbounds1 = obj1.getbounds().clone(); var objbounds2 = obj2.getbounds().clone(); var pt = obj1.globaltolocal(objbounds2.x, objbounds2.y); var h1 = -(objbounds1.height / 2 + objbounds2.height); var h2 = objbounds2.width / 2; var w1 = -(objbounds1.width / 2 + objbounds2.width); var w2 = objbounds2.width / 2; if(pt.x > w2 || pt.x < w1) return false; if(pt.y > h2 || pt.y < h1) return false; return true; } //adds object stage stage.addchild(destination, dragger); stage.mousemoveoutside = true; stage.update();hi,
i've made simple drag , drop in canvas. works fine when canvas resizes window changes position of object when picked , of drop area (interestingly still draws things in right position , places object in right position after dropped.
i'm sure i'm missing simple, here's code:
Comments
Post a Comment