使用图像、dynamic.js、javascript进行网格捕捉操作

我可以在KineticJS中用图像实现网格捕捉操作吗使用jquery？(http://jqueryui.com/demos/draggable/snap-to.html)就像我在画布内有一些可拖动的图像，我希望它们限制画布内的移动。。。

当画布中的一个图像靠近另一个图像时，两个图像是否可以捕捉在一起？？它可以使用kinetic.js或javascript实现吗。。。

谢谢Ashish

这是代码。。这有点复杂。我的意思是我正在从画布外加载图像。。有两套。。现在我希望一个集能够捕捉到另一个集。。

  <script src="kinetic-v3.8.0.min.js">
  </script>
  <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script src="jquery-1.7.1.js"></script>
<script src="jquery.ui.core.js"></script>
<script src="jquery.ui.widget.js"></script>
<script src="jquery.ui.mouse.js"></script>
<script src="jquery.ui.draggable.js"></script>

    <script>
        function drawImage(imageObj){
            var stage = new Kinetic.Stage("container", 578, 500);
            var layer = new Kinetic.Layer();
            var x = stage.width / 2 - 200 / 2;
            var y = stage.height / 2 - 137 / 2;
            var width = 200;
            var height = 137;
            // darth vader
            var darthVaderImg = new Kinetic.Shape(function(){
                var context = this.getContext();
                context.clearRect(x,y,width,height);
                context.drawImage(imageObj, x, y, width, height);
                // draw invisible detectable path for image
                context.beginPath();
                context.rect(x, y, width, height);
                context.closePath(); 

          });
            // enable drag and drop
            darthVaderImg.draggable(true);
            // add cursor styling
            darthVaderImg.on("mouseover", function(){
                document.body.style.cursor = "pointer";
            });
            darthVaderImg.on("mouseout", function(){
                document.body.style.cursor = "default";
            });
            //remove image on double click
            darthVaderImg.on("dblclick dbltap", function(){
            layer.remove(darthVaderImg);

            layer.draw();
                });
            layer.add(darthVaderImg);
            stage.add(layer);
            //events
        }

         function drawImage2(imageObj){
            var stage = new Kinetic.Stage("container", 578, 500);
            var layer = new Kinetic.Layer();
            var x = stage.width / 2 - 300 ;
            var y = stage.height / 2 - 137 ;
            var width = 200;
            var height = 137;
            // darth vader
            var darthVaderImg2 = new Kinetic.Shape(function(){
                var context = this.getContext();
                context.drawImage(imageObj, x, y, width, height);
                // draw invisible detectable path for image
                context.beginPath();
                context.rect(x, y, width, height);
                context.closePath();
            });
            // enable drag and drop
            darthVaderImg2.draggable(true);
            // add cursor styling
            darthVaderImg2.on("mouseover", function(){
                document.body.style.cursor = "pointer";
            });
            darthVaderImg2.on("mouseout", function(){
                document.body.style.cursor = "default";
            });
            //remove image on double click
            darthVaderImg2.on("dblclick dbltap", function(){
            layer.remove(darthVaderImg2);

            layer.draw();

                   });
                layer.add(darthVaderImg2);
             stage.add(layer);

          $( ".darthVaderImg2" ).draggable({ grid: [ 20,20 ] });
             }

               function load(img){
                 // load image
                 var imageObj = new Image();
                 imageObj.onload = function(){
                drawImage(this);
                  };
                   imageObj.src = img.src;
                    };
                 function load2(img){
             // load image
                 var imageObj = new Image();
                imageObj.onload = function(){
                drawImage2(this);
               };
               imageObj.src = img.src;
                 };
             </script>
            <title>HTMl5 drag drop multiple elements</title></head>
             <body onmousedown="return false;">
              <div id="container">
              </div>
             <div id="check1">
            <ul id="img"> <li><a href="#"onclick="load(document.getElementById('i1'))">
            <img class="ui-widget-header" src="dog.png" id="i1" alt="doggie"     width="60"height="55"/>
      </a></li>
      <li>
        <a href="#" onclick="load(document.getElementById('i2'))">
        <img src="dog2.png" id="i2" alt="Pulpit rock" width="60" height="55"        /></a>
    </li>
    </ul>
    </div>
    <ul id="img1">
        <li><a href="#" onclick="load2(document.getElementById('i4'))">
            <img alt="doggie" src="beach.png" id="i4" width="60" height="55" />
             </a></li>
             <li><a href="#" onclick="load2(document.getElementById('i5'))">
        <img alt="doggie" src="cat3.png" id="i5" width="60" height="55" /></a></li>
       </ul>
       </body>
        </html>