Make multiple image draggable

Biruntha · January 6, 2015

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>

Edited January 6, 2015 by Biruntha

CroNiX · January 6, 2015

You have one image with the ID of "house". It looks like your script is working on that ID. I don't know that script, but it seems if you changed the image to be CLASS=house instead of ID=house, and then have multiple images with CLASS=house, and change the script to work with '.house' instead of '#house' it would work on all images with that class.

Biruntha · January 7, 2015

@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>

Sign In

Make multiple image draggable

Recommended Posts

Biruntha

Link to comment

Share on other sites

CroNiX

Link to comment

Share on other sites

Biruntha

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information