Jump to content

Biruntha

New Members
 View Profile  See their activity

  • Posts

    4

  • Joined

  • Last visited

Biruntha's Achievements

Newbie

Newbie (1/5)

0

Reputation

  1. Biruntha
    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Prototype</title> <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.2.min.js"></script> <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.min.js"></script> <style> body{padding:20px;} #container{ border:solid 1px #ccc; margin-top: 10px; width:350px; height:350px; } #toolbar{ width:350px; height:35px; border:solid 1px blue; } </style> <script> $(function(){ var $house=$("#house"); $house.hide(); var $stageContainer=$("#container"); var stageOffset=$stageContainer.offset(); var offsetX=stageOffset.left; var offsetY=stageOffset.top; var stage = new Kinetic.Stage({ container: 'container', width: 350, height: 350 }); var layer = new Kinetic.Layer(); stage.add(layer); var image1=new Image(); image1.onload=function(){ $house.show(); } image1.src="http://vignette1.wikia.nocookie.net/angrybirds/images/b/b6/Small.png/revision/latest?cb=20120501022157"; $house.draggable({ helper:'clone', }); $house.data("url","house.png"); // key-value pair $house.data("width","32"); // key-value pair $house.data("height","33"); // key-value pair $house.data("image",image1); // key-value pair $stageContainer.droppable({ drop:dragDrop, }); function dragDrop(e,ui){ var x=parseInt(ui.offset.left-offsetX); var y=parseInt(ui.offset.top-offsetY); var element=ui.draggable; var data=element.data("url"); var theImage=element.data("image"); var image = new Kinetic.Image({ name:data, x:x, y:y, image:theImage, draggable: true, dragBoundFunc: function(pos) { return { x: pos.x, y: this.getAbsolutePosition().y } } }); //get image position. var w=0; var obj; image.on("dragend", function(e) { w=w+1; var points = image.getPosition(); if(w>1){ obj = stage.get('#imageantry') obj.remove(); } var image2 = new Kinetic.Image({ name: data, id: "imageantry", x: points.x+75, y: points.y, image: theImage, draggable: false }); layer.add(image2); layer.draw(); }); image.on('dblclick', function() { image.remove(); layer.draw(); }); layer.add(image); layer.draw(); } }); // end $(function(){}); </script> </head> <body> <div id="toolbar"> <img id="house" width=32 height=32 src="http://vignette1.wikia.nocookie.net/angrybirds/images/b/b6/Small.png/revision/latest?cb=20120501022157"><br> </div> <div id="container"></div> </body> </html>
  2. Biruntha
    After image is drop into container , I want to move copy of the original image to be move when original image dragend within container. I tried but it display copy image each time when original image dragend. can anyone help me? <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Prototype</title> <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.2.min.js"></script> <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.min.js"></script> <style> body{padding:20px;} #container{ border:solid 1px #ccc; margin-top: 10px; width:350px; height:350px; } #toolbar{ width:350px; height:35px; border:solid 1px blue; } </style> <script> $(function(){ var $house=$("#house"); $house.hide(); var $stageContainer=$("#container"); var stageOffset=$stageContainer.offset(); var offsetX=stageOffset.left; var offsetY=stageOffset.top; var stage = new Kinetic.Stage({ container: 'container', width: 350, height: 350 }); var layer = new Kinetic.Layer(); stage.add(layer); var image1=new Image(); image1.onload=function(){ $house.show(); } image1.src="http://vignette1.wikia.nocookie.net/angrybirds/images/b/b6/Small.png/revision/latest?cb=20120501022157"; $house.draggable({ helper:'clone', }); $house.data("url","house.png"); // key-value pair $house.data("width","32"); // key-value pair $house.data("height","33"); // key-value pair $house.data("image",image1); // key-value pair $stageContainer.droppable({ drop:dragDrop, }); function dragDrop(e,ui){ var x=parseInt(ui.offset.left-offsetX); var y=parseInt(ui.offset.top-offsetY); var element=ui.draggable; var data=element.data("url"); var theImage=element.data("image"); var image = new Kinetic.Image({ name:data, x:x, y:y, image:theImage, draggable: true, dragBoundFunc: function(pos) { return { x: pos.x, y: this.getAbsolutePosition().y } } }); image.on("dragend", function(e) { var points = image.getPosition(); var image1 = new Kinetic.Image({ name: data, id: "imageantry", x: points.x+65, y: points.y, image: theImage, draggable: false }); layer.add(image1); layer.draw(); }); image.on('dblclick', function() { image.remove(); layer.draw(); }); layer.add(image); layer.draw(); } }); // end $(function(){}); </script> </head> <body> <div id="toolbar"> <img id="house" width=32 height=32 src="http://vignette1.wikia.nocookie.net/angrybirds/images/b/b6/Small.png/revision/latest?cb=20120501022157"><br> </div> <div id="container"></div> </body> </html>
  3. Biruntha
    @CroNiX Thankyou... I done multiple image to be draggable....Then i want only one image to be drop at a perticular position, when i drop that image.how can i do this?help me.... <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.2.min.js"></script> <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.min.js"></script> <style> body { padding:20px; } #container { border:solid 1px #ccc; margin-top: 10px; width:350px; height:350px; } #toolbar { width:350px; height:35px; border:solid 1px blue; } </style> <script> $(function(){ // get a reference to the house icon in the toolbar // hide the icon until its image has loaded // get the offset position of the kinetic container var $stageContainer = $("#container"); var stageOffset = $stageContainer.offset(); var offsetX = stageOffset.left; var offsetY = stageOffset.top; //initialize counter for image IDs var imageCount = -1; //select images from toolbar var imageList = document.getElementsByClassName("imageToDrag"); //loop through imageList for (var i = 0; i < imageList.length; i++) { //use a closure to keep references clean (function() { var $house, image; var $house = $(imageList); $house.hide(); image = new Image(); image.onload = function () { $house.show(); } //read source image from given img tag image.src = imageList.getAttribute("src"); // start loading the image used in the draggable toolbar element // this image will be used in a new Kinetic.Image // make the toolbar image draggable $house.draggable({helper: 'clone'}); $house.data("url", "house.png"); // key-value pair $house.data("width", "32"); // key-value pair $house.data("height", "33"); // key-value pair $house.data("image", image); // key-value pair })(); } // create the Kinetic.Stage and layer var stage = new Kinetic.Stage({ container: 'container', width: 350, height: 350 }); var layer = new Kinetic.Layer(); stage.add(layer); // make the Kinetic Container a dropzone $stageContainer.droppable({ drop: dragDrop, }); // handle a drop into the Kinetic container function dragDrop(e, ui) { // get the drop point var x = parseInt(ui.offset.left - offsetX); var y = parseInt(ui.offset.top - offsetY); // get the drop payload (here the payload is the image) var element = ui.draggable; var data = element.data("url"); var theImage = element.data("image"); // create a new Kinetic.Image at the drop point // be sure to adjust for any border width (here border==1) var image = new Kinetic.Image({ name: data, id: "image"+(imageCount++), x: x, y: y, image: theImage, draggable: true, dragBoundFunc: function(pos) { // if(pos.x<this.minX){ pos.x=this.minX; } // this.minX=pos.x; return { x: pos.x, y: this.getAbsolutePosition().y } } }); image.on('dblclick', function() { image.remove(); layer.draw(); }); layer.add(image); layer.draw(); } }); // end $(function(){}); </script> </head> <body> <div id="toolbar"> <img class = "imageToDrag" width=32 height=32 src="http://t2.gstatic.com/images?q=tbn:ANd9GcQ5fOr5ro_dK6D9UmSsVn0Z9m1QQMqRwr0z1tP_BzEGr7GuTrgeZQ"> <img class = "imageToDrag" width=32 height=32 src="http://sandbox.kendsnyder.com/IM/square-stripped.png"> <img class = "imageToDrag" width=32 height=32 src="http://t3.gstatic.com/images?q=tbn:ANd9GcRBYkAv40Eeaxlze2dqhayvKUeoUH6l_jYNLlsfjzJu0Uy9ucjcNA"> <br> </div> <div id="container"></div> </body> </html>
  4. Biruntha
    In the following code only one image is draggable.How can i make multible image in toolbar to be draggable dynamically?Anyone help me? <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Prototype</title> <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.2.min.js"></script> <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.min.js"></script> <style> body{padding:20px;} #container{ border:solid 1px #ccc; margin-top: 10px; width:350px; height:350px; } #toolbar{ width:350px; height:35px; border:solid 1px blue; } </style> <script> $(function(){ // get a reference to the house icon in the toolbar // hide the icon until its image has loaded var $house=$("#house"); $house.hide(); // get the offset position of the kinetic container var $stageContainer=$("#container"); var stageOffset=$stageContainer.offset(); var offsetX=stageOffset.left; var offsetY=stageOffset.top; // create the Kinetic.Stage and layer var stage = new Kinetic.Stage({ container: 'container', width: 350, height: 350 }); var layer = new Kinetic.Layer(); stage.add(layer); // start loading the image used in the draggable toolbar element // this image will be used in a new Kinetic.Image var image1=new Image(); image1.onload=function(){ $house.show(); } image1.src="http://vignette1.wikia.nocookie.net/angrybirds/images/b/b6/Small.png/revision/latest?cb=20120501022157"; // make the toolbar image draggable $house.draggable({ helper:'clone', }); // set the data payload $house.data("url","house.png"); // key-value pair $house.data("width","32"); // key-value pair $house.data("height","33"); // key-value pair $house.data("image",image1); // key-value pair // make the Kinetic Container a dropzone $stageContainer.droppable({ drop:dragDrop, }); // handle a drop into the Kinetic container function dragDrop(e,ui){ // get the drop point var x=parseInt(ui.offset.left-offsetX); var y=parseInt(ui.offset.top-offsetY); // get the drop payload (here the payload is the image) var element=ui.draggable; var data=element.data("url"); var theImage=element.data("image"); // create a new Kinetic.Image at the drop point // be sure to adjust for any border width (here border==1) var image = new Kinetic.Image({ name:data, x:x, y:y, image:theImage, draggable: true, // restrict to allow horizontal dragging only dragBoundFunc: function(pos) { // if(pos.x<this.minX){ pos.x=this.minX; } // this.minX=pos.x; return { x: pos.x, y: this.getAbsolutePosition().y } } }); layer.add(image); layer.draw(); } }); // end $(function(){}); </script> </head> <body> <div id="toolbar"> <img id="house" width=32 height=32 src="http://vignette1.wikia.nocookie.net/angrybirds/images/b/b6/Small.png/revision/latest?cb=20120501022157"><br> </div> <div id="container"></div> </body> </html>
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.