javascript - 图像可拖动到特定的 x,y 坐标

Question

在，jsfiddle.net/gkefk/32放置图像后可以将多个图像拖动到任何地方...但我想，当我拖动蓝色图像时，它必须放置在框的中心。放置蓝色 img 后，它不能拖动。但可以放置其他图像框中的任何位置，并且可以在框中的任何位置拖动...我该怎么做？

JS代码

   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代码

   <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

嗨，这是你需要的吗？

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
    });
}