我试图调整此示例http://raphaeljs.com/graffle.html以限制拖动到容器svg内.

有点像http://bl.ocks.org/1557377或http://jqueryui.com/demos/draggable/#constrain-movement基本上我想限制拖动时从边界框移出的对象.

这是添加到移动功能的调整代码(http://jsfiddle.net/f4mFQ/1/)

    if(thisBox.x < 0){
        ddx = 0;
    }else if(thisBox.x>width-thisBox.width ){
        ddx = width-thisBox.width;
    }else {
        ddx = this.ox + dx;
    }

    if(thisBox.y < 0){
        ddy = 0;
    }else if(thisBox.y>height-thisBox.height ){
        ddy = height-thisBox.height;
    }else{
        ddy = this.oy + dy;
    }

这部分有效,当矩形移动超出边界时,它会在边缘上跳舞！而圆和椭圆卡在边缘.

因此,在这种情况下,如何在父边界框内使用约束移动限制元素拖动svg

解决方法:

一个问题是,当您将ddx或ddy设置为位于一侧时,您将该值作为椭圆的中心点返回,以便它们“捕捉”到侧面.

第二件事是你在这个边界框的左上角进行计算,而不是这个(ox dx)的实际计算位置.这就是造成混乱的原因.

这不是最漂亮的实现,但我想最小化对代码的更改,用这个替换move函数：

 move = function (dx, dy) {
    var width =this.paper.width,
    height = this.paper.height,
    thisBox = this.getBBox()
    //, box = {
    //     "x"      :thisBox.width,
    //     "y"      :thisBox.height,
    //     "x2"     :width-thisBox.width,
    //     "y2"     :height-thisBox.height,
    //     "width"  :width-thisBox.width,
    //     "height" :height-thisBox.height
    // };
    // var outOfBound=!Raphael.isBBoxIntersect(thisBox,box)
    ;

    console.log(thisBox.width,width,thisBox.x,thisBox
                ,this.ox);

    var ddx = this.ox + dx;
    var ddy = this.oy + dy;
    if (this.type == 'ellipse') { 
        ddx -= thisBox.width / 2;
        ddy -= thisBox.height / 2;
    }

    if(ddx < 0){
        ddx = 0;
    }else if(ddx>width-thisBox.width ){
        ddx = width-thisBox.width;
    }

    if(ddy < 0){
        ddy = 0;
    }else if(ddy>height-thisBox.height ){
        ddy = height-thisBox.height;
    }

    var att = this.type == "rect" ? {x: ddx, y: ddy} : {cx: ddx + (thisBox.width / 2), cy: ddy + (thisBox.height / 2)};
    this.attr(att);


    for (var i = connections.length; i--;) {
        r.connection(connections[i]);
    }
    r.safari();
} 

在开始时,我们根据此位置计算ddx和ddy作为左上角. (如果它是椭圆,则调整,因为ox和oy是中心坐标).

然后它与之前的情况大致相同,但是当我们将值设置回来时,我们会重新调整椭圆的值.您可以更改存储/使用的值以避免重复计算.

这对我行得通.

编辑

将代码复制到自己的fiddle中.