Изображение перетаскивается в суставную координату 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 
    }); 
}