I am Trying to tweak this example .html to restrict the drag to within the container svg.

Somewhat like or Basically I want to restrict objects moving out from the bounding box while dragging.

Here is the tweaked code added to move function ( / )

    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;
    }

This partially works, when rectangle is moved beyond boundary it kind of dances on the edge! while the circle and ellipse get stuck to the edge.

So how to restrict element drag with constrained movement within parent bounding box in this case svg

I am Trying to tweak this example http://raphaeljs./graffle.html to restrict the drag to within the container svg.

Somewhat like http://bl.ocks/1557377 or http://jqueryui./demos/draggable/#constrain-movement Basically I want to restrict objects moving out from the bounding box while dragging.

Here is the tweaked code added to move function ( http://jsfiddle/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;
    }

This partially works, when rectangle is moved beyond boundary it kind of dances on the edge! while the circle and ellipse get stuck to the edge.

So how to restrict element drag with constrained movement within parent bounding box in this case svg

• javascript
• raphael
• constraints
• drag
• bounding-box

Share Improve this question Follow asked Sep 22, 2012 at 23:38 Prashant BhatePrashant Bhate 11.1k88 gold badges5151 silver badges8383 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4 +50

One issue is that you're when you set ddx or ddy to be positioned on a side you then feed that value back as the center point of the ellipses so they 'snap' off to the side.

The second thing is you do your putations on the top left of the bounding box of this, not the actual calculated position of this (ox + dx). That's what's causing the confusion.

This isn't the prettiest implementation but I wanted to minimize the changes to your code, replace the move function with this one:

 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();
} 

At the start we calculate ddx and ddy as the top left based on the position of this. (Adjusted if it's a ellipse, as ox and oy are the center co-ordinates).

Then it's much the same as before, although when we set the value back we re-adjust the values for the ellipse. You could change what values are stored/used to avoid the duplicate calculation.

That works for me.

Edit

Copied code into it's own fiddle.

Hi I have updated the fiddle with this code, this seems working although not perfect,

The code changed

       if (thisBox.x < 0) {
            ddx = 0 + thisBox.width/2;//the position 0 was problem
        } else if (thisBox.x > width - thisBox.width) {
            ddx = width - thisBox.width;
        } else {
            ddx = this.ox +dx;
        }

        if (thisBox.y < 0) {
            ddy = 0+thisBox.height/2;//the position 0 was problem
        } else if (thisBox.y > height - thisBox.height) {
            ddy = height - thisBox.height;
        } else {
            ddy = this.oy + dy;
        }

I have updated the fiddle

Also I have updated some CSS to make it more clear and error free.

Update: Vibration,

I have updated fiddle2 that removes vibration on the top and left side,

Please check and reply

Also see this fiddle3 that works with the rounds/ellipses well but have problem with rectangle's I think there is something I must have missed, but working fine with ellipses so that should help