How to implement Rotation and Drag&Drop in Kinetic.js?

Question

KineticJS images are both draggable and rotatable already.

enter image description here

For the "drop", you can listen for the drop event on the image like this:

  kImage.on('dragend', function() {

      // do your drop tests here

  });

Here is code and a Fiddle: http://jsfiddle.net/m1erickson/eCekf/

<!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.5.4.min.js"></script>

<style>
#container{
  border:solid 1px #ccc;
  margin-top: 10px;
  width:400px;
  height:400px;
}
</style>        
<script>
$(function(){

    var stage = new Kinetic.Stage({
        container: 'container',
        width: 400,
        height: 400
    });
    var layer = new Kinetic.Layer();
    stage.add(layer);

    var kImage;

    var img=new Image();
    img.onload=function(){
        kImage=new Kinetic.Image({
            image:img,
            x:175,
            y:175,
            width:150,
            height:150,
            offset:[75,75],
            draggable:true
        });
        layer.add(kImage);
        kImage.rotate(30*Math.PI/180);
        layer.draw();
    }
    img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house-icon.png";


    $("#rotate").click(function(){
        kImage.rotate(kImage.getRotation()+20*Math.PI/180);
        layer.draw();
    });

}); // end $(function(){});

</script>       
</head>

<body>
    <div id="container"></div>
    <button id="rotate">Rotate</button>
</body>
</html>