Click here to Skip to main content
15,891,738 members
Search within:


How to move copy image in Kineticjs when original image dragend
Please Sign up or sign in to vote.
0.00/5 (No votes)
I want to move copy of the original image to be move when original image dragend
I tried but it display copy image each time when original image dragend. can anyone help me?

JavaScript
      <!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>
Posted
Add a Solution

2 solutions

This may help you :
http://msdn.microsoft.com/en-us/library/system.windows.forms.htmlelement.dragend(v=vs.110).aspx[^]
Just set the operation after dragging as copy your original image.
 
Share this answer
 
Posted
Comments
birunthag 8-Jan-15 6:48am    
@yesii still I couldn't get output help me...
JavaScript
<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>
    </br></img></div>
    <div id="container"></div>
</body>
</html>
 
Share this answer
 
Posted
Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month
Related Questions
How to move image in Kineticjs on mousedown?
How to image process the on the original image like the of the given output
How to crop bitmap and save with original clarity of image ?
Aforge.net when I save image with camera device the image is not saving image in original location and cutting
Show original image as popup when click on small image
how to get original image from green image
Rotate picturebox image
Emgu.cv.util.cvexception: opencv: using original local binary patterns for feature extraction only works on single-channel images (given 16). Please pass the image data as a grayscale image!
Why are colors distorted when I encode an image to webp?
How do I copy an image in a web browser control?

Advertise
Privacy
Cookies
Terms of Use
Last Updated 9 Jan 2015
Layout: fixed | fluid
Copyright © CodeProject, 1999-2024
All Rights Reserved.

Web01 2.8:2024-04-02:1

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900