如何对对象进行反技术是另一个与拉斐尔JS

How to detech object is over another with RaphaelJS?

本文关键字：另一个 JS 技术对象更新时间：2023-09-26

我可以以某种方式阻止一个对象被移动到另一个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 );

如何使其中一个对象移动到另一个对象上进行减技术？

我不熟悉拉斐尔.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;}

    }