javascript - 如何使用 RaphaelJS 对对象进行 detech 处理？

Question

我能以某种方式检测到一个物体被移动到另一个物体上Raphael.js吗？

我使用基本的 startMove()、move()、stop() 方法来拖放对象：

var startSystemMove = function() {
    this.odx = 0;
    this.ody = 0;
};
var moveSystem = function(dx, dy) {
    this.translate(dx - this.odx, dy - this.ody);
    this.odx = dx;
    this.ody = dy;
};
var stopSystemMove = function(dx, dy) {
    // do nothing...
};

以下是对象：

var r1 = paper.rect(20, 105, 122, 23).attr({
    'fill':'#fff',
    'fill-opacity':'0.5',
    'stroke-width':'3',
    'stroke':'#fff',
    'cursor':'move'
});
var r2 = paper.rect(200, 200, 100, 100).attr({
    'fill':'#fff',
    'fill-opacity':'0.5',
    'stroke-width':'3',
    'stroke':'#fff',
    'cursor':'move'
});

设置可拖动：

r1.drag( moveSystem, startSystemMove, stopSystemMove );
r2.drag( moveSystem, startSystemMove, stopSystemMove );

我怎样才能解除其中一个对象移动到另一个对象之上？

Answer 1

我对 raphael.js 不熟悉，但这是我创建的一个函数，您也许可以在您的代码中实现。

我将它与可拖动的 jquery ui 一起使用。请参阅此处的jsfiddle 示例。希望这可以帮助

   $(function()
  {
      $(".block").draggable(
      {
          stop: function(event, ui)
          {
              $(this).css({position: "absolute"});
          }
      });

      $(".block").on("drag",function()
      {
         var hasCollided = collision(this, ".block");          
         if(hasCollided){return false;}    
      });
  });

  function collision(obj, collideObj)
    {
        var collidedElements = new Object();
        var collided = false;

        $(obj).each(function(){
        var player = $(this);
        var playerWidth = $(this).width();
        var playerHeight = $(this).height();
        var playerPosition = player.offset();
        var playerLeft = playerPosition.left;
        var playerRight = playerLeft + player.width();
        var playerTop = playerPosition.top;
        var playerBottom = playerTop + player.height();

        collidedElements.first = player;

        $(collideObj).not(obj).each(function()
        {
            var block = $(this);
            var blockPosition = block.offset();
            var blockLeft = blockPosition.left;
            var blockRight = blockLeft + block.width();
            var blockTop = blockPosition.top;
            var blockBottom = blockTop + block.height();

            if( playerLeft < blockRight &&
                playerLeft > blockLeft &&
                playerBottom > blockTop +10 &&
                playerTop < blockBottom -10)
                {
                    // alert('Collision on left side'); // Debug Code //
                    /*block.removeClass("block");
                    block.toggle("explode", 0);*/            
                    $(player).css({position:"absolute",left: blockRight +1});
                    collided = true;
                    collidedElements.second = $(this);
                    return true;
                }
            if( playerRight > blockLeft &&
                playerRight < blockRight &&
                playerBottom > blockTop + 10 &&
                playerTop < blockBottom - 10)
                {
                    //alert("Collision on right side"); // Debug Code //
                    /*block.removeClass("block");
                    block.toggle("explode", 0);*/
                    $(player).css({position:"absolute",left: blockLeft - (playerWidth +1)});
                    collided = true;
                    collidedElements.second = $(this);
                    return true;
                }
            if( playerTop < blockBottom  &&
                playerTop > blockTop &&
                playerLeft < blockRight -10 &&
                playerRight > blockLeft + 10)
                {
                    //alert("Collision on bottom side"); // Debug Code //
                    /*block.removeClass("block");
                    block.toggle("explode", 0);*/

                    $(player).css({ position:"absolute", top: blockBottom +1});
                    collided = true;
                    collidedElements.second = $(this);
                    return true;
                }
            if( playerBottom > blockTop &&
                playerBottom < blockBottom &&
                playerLeft < blockRight -10 &&
                playerRight > blockLeft +10)
                {
                    //alert("Collision on top side"); // Debug Code //
                    /*block.removeClass("block");
                    block.toggle("explode", 0);*/
                    $(player).css({position:"absolute",top: blockTop - (playerHeight+ 1)});
                    collided = true;
                    collidedElements.second = $(this);
                    return true;
                }           
        });
        });
        if(collided)
        {return collidedElements;}
        else{return false;}


    }