Image is draggable to a perticular x,y coordinate

Question

In, jsfiddle.net/gkefk/32 multiple image can be draggable anywhere after drop the image...but i want, when i drag the blue image it has to drop center of the box.after drop the blue img it can't be draggable.but other images can be drop anywhere in the box and can be draggable anywhere within the box...how can i do this?

JS Code

   var $stageContainer = $("#container");
   var stageOffset = $stageContainer.offset();
   var offsetX = stageOffset.left;
   var offsetY = stageOffset.top;

  //initialize counter for image IDs
  var imageCount = -1;

  var imageSrc = ["http://t2.gstatic.com  /images?q=tbn:ANd9GcQ5fOr5ro_dK6D9UmSsVn0Z9m1QQMqRwr0z1tP_BzEGr7GuTrgeZQ",
  "http://sandbox.kendsnyder.com/IM/square-stripped.png",
  "http://t3.gstatic.com     /images?q=tbn:ANd9GcRBYkAv40Eeaxlze2dqhayvKUeoUH6l_jYNLlsfjzJu0Uy9ucjcNA"
   ];

   //loop through imageSrc list
   for (var i = 0; i  < imageSrc.length; i++) {
   //use a closure to keep references clean
    (function() {
        var $house, image;
        var $house = $("#house"+i);
        $house.hide();
        image = new Image();
        image.onload = function () {
        $house.show();
      }
       image.src = imageSrc[i];
        // 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
       });
      image.on('dblclick', function() {
      image.remove();
      layer.draw();
   });
   layer.add(image);
   layer.draw();
 }

HTML Code

   <h4>Drag the 3 objects from blue toolbar to the canvas<br>Then you can drag around  canvas.</h4>
   <div id="toolbar">
   <img id="house0" width=32 height=32 src="http://t2.gstatic.com   /images?q=tbn:ANd9GcQ5fOr5ro_dK6D9UmSsVn0Z9m1QQMqRwr0z1tP_BzEGr7GuTrgeZQ">
   <img id="house1" width=32 height=32 src="http://sandbox.kendsnyder.com/IM/square-stripped.png">
   <img id="house2" width=32 height=32 src="http://t3.gstatic.com/images?q=tbn:ANd9GcRBYkAv40Eeaxlze2dqhayvKUeoUH6l_jYNLlsfjzJu0Uy9ucjcNA">
   <br>
   </div>
   <div id="container"></div>

Answer 1

Hi is this what you need ?

http://jsfiddle.net/gkefk/51/

//Not draggable and centering for the sticky class
if($(ui.helper).hasClass("sticky")){
    console.log();
     var image = new Kinetic.Image({
        name: data,
        id: "image"+(imageCount++),
        x: $stageContainer.width() / 2 - ($(ui.helper).width() / 2),
        y: $stageContainer.height() / 2 - ($(ui.helper).height() / 2),
        image: theImage,
        draggable: true,
        // restrict to allow horizontal dragging only
        dragBoundFunc: function(pos) {
            return {
              x: pos.x,
              y: this.getAbsolutePosition().y
            }
        }    
    });
}else{ 
    //all other elements   
    var image = new Kinetic.Image({
        name: data,
        id: "image"+(imageCount++),
        x: x,
        y: y,
        image: theImage,
        draggable: true
    });
}