Как перетащить прямоугольник svg в d3.js?

Question

Здесь я создаю прямоугольник с именем resize_icon в другом прямоугольнике, позиционирующем его в правом нижнем углу большого прямоугольника. Я хочу, чтобы этот прямоугольник resize_icon был перемещен свободно в большом прямоугольнике, но он не должен пересекать верхний край больших прямоугольников и его левый но можно перетащить в другое место. resize [] - это массив, который содержит id, x и y позицию прямоугольника resize_icon. Пожалуйста, посмотрите следующий код перетаскивания и, пожалуйста, скажите, почему он не работает. Также, если кто-то может предложить правильный код, он будет действительно полезен.

  c.append('rect').attr('class','resize_icon').attr('fill','#000') 
       .attr('id','resize_icon'+i).attr('height',5).attr('width',5) 
       .attr('x', x+wd+35).attr('y',y+rectHeight-5).on(drag1) 
       .on('click',function(){ 

         d3.selectAll(".selected").classed("selected",false); 

         d3.select(this.parentNode).classed("selected",true); 

         resize_rect(i); 


        }); 


     var drag1 = d3.behavior.drag().origin(function() 
    { 
     var t = d3.select(this); 
     return {x: t.attr("x"), y: t.attr("y")}; 
    }) 
    .on("dragstart", dragstart) 
    .on("drag", dragon) 
    .on("dragend", dragstop); 


    function dragstart() { 
     d3.event.sourceEvent.stopPropagation(); 
     d3.select(this).classed("drag", true); 
    } 

    function dragon() {  
     d3.select(this).select('.resize_icon') 
        .attr("x", d3.event.x) 
        .attr("y", d3.event.y); 

     id = d3.select(this).select('.resize_icon').attr("id"); 
     a = id.replace("resize_icon", ""); 
     resize[a].x = d3.event.x; 
     resize[a].y = d3.event.y; 

    }   


    function dragstop() { 
    d3.select(this).classed("drag", false); 
    }  

Answer 1

Вот мой код, чтобы перетащить между границей:

function button_drag2(xLower,xHigher,yLower,yHigher){ 
    return d3.behavior.drag() 
      .origin(function() { 
       var g = this; 
       return {x: d3.transform(g.getAttribute("transform")).translate[0], 
         y: d3.transform(g.getAttribute("transform")).translate[1]}; 
      }) 
      .on("drag", function(d) { 

       g = this; 
       translate = d3.transform(g.getAttribute("transform")).translate; 

       x = d3.event.dx + translate[0], 
       y = d3.event.dy + translate[1]; 

       if(x<xLower){x=xLower;} 
       if(x>xHigher){x=xHigher;} 
       if(y<yLower){y=yLower;} 
       if(y>yHigher){y=yHigher;} 

       d3.select(g).attr("transform", "translate(" + x + "," + y + ")"); 
       d3.event.sourceEvent.stopPropagation();    
      }); 
} 
} 

Тогда звоните на ваш выборе:

var selection = "#rectangle"; //change this to whatever you want to select 
    d3.select(selection).call(button_drag2(-100,100,-100,100)); 

// this lets you drag the rectangle 100px left, right, up and down. Change to what ever you want :) 

Надеется, что это помогает вам :)