Цель: Переместить красный прямоугольник в группу черных прямоугольников. Черные прямоугольники образуют фигуру, которая предназначена для перемещения красного прямоугольника.Ограничить движение элемента при его перетаскивании
window.onload=function(){
var inter = false;
//Make an SVG Container
var svgContainer = d3.select("body").append("svg")
.attr("width", 800)
.attr("height", 600);
//draw some rects
var r1 = svgContainer.append("rect")
.attr("class", "interactive")
.attr("x", 10)
.attr("y", 223)
.attr("width", 50)
.attr("height", 150);
var r2 = svgContainer.append("rect")
.attr("class", "interactive")
.attr("x", 223)
.attr("y", 10)
.attr("width", 50)
.attr("height", 300)
.attr("transform", "rotate(45 220,10)");
//group of elements for limit red rect drag
var interactive = d3.selectAll(".interactive")
.on("mouseover", function(d){
inter = true;
})
.on("mouseleave", function(d){
inter = false;
});
// dragging function
var drag = d3.behavior.drag()
.on("drag", function(d,i) {
if(inter){
d.x += d3.event.dx;
d.y += d3.event.dy;
d3.select(this).attr("transform", function(d,i){
return "translate(" + [ d.x,d.y ] + ")"
});
}
})
.on("dragstart", function() {
d3.select(this).style("pointer-events", "none")
})
.on("dragend", function() {
d3.select(this).style("pointer-events", "auto")
});
// red rectangle for draging
var r = svgContainer.append("rect")
.attr("x", 150)
.attr("y", 100)
.attr("width", 20)
.attr("height", 20)
.attr("fill", "red")
.data([ {"x":0, "y":0} ])
.call(drag);
}
http://codepen.io/anon/pen/pjorBb
Вот мой пример субъекта. Но он не работает должным образом. Возможно, у кого-то есть похожий пример правильного или дайте подсказку, как это сделать правильно.
Это хороший вариант! Но он не работает правильно с вращающимся объектом. –