如何将拖放元素拖动到svg组中
如何将拖放元素拖动到svg组中
提问于 2015-07-13 21:26:29
我在左边有几个圆圈，右边有一个svg组。我想在拖放时将圆圈拖到svg组中。一旦我将元素放到svg组中，它就应该被附加到组中。
到目前为止，我已经创建了一个可拖动的元素和可拖动的组，但找不到任何相同的文章。
我在左边有几个圆圈，右边有一个svg组。我想在拖放时将圆圈拖到svg组中。一旦我将元素放到svg组中，它就应该被附加到组中。
到目前为止，我已经创建了一个可拖动的元素和可拖动的组，但找不到任何相同的文章。
演示：http://jsbin.com/wowunoluza/1/edit?html,js,output
<!doctype html>
<html>
<head>
<title>Editor</title>
<meta http-equiv="x-ua-compatible" content="ie=9"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<link rel="stylesheet" href="<%=request.getContextPath()%>/style.css" />
<script type="text/javascript">
window.onload = function ()
{
var svgContainer = d3.select("body").append("svg")
.attr("width", 800)
.attr("height", 803);
var sidebar = svgContainer.append("rect")
.attr("x", 0)
.attr("y", 43.5)
.attr("width", 69)
.attr("height", 620)
.attr("stroke-width", 2)
.attr("stroke", "#7E7E7E")
.style("fill", "none");
var rect = svgContainer.append("rect")
.attr("x", 10)
.attr("y", 50)
.attr("width", 51)
.attr("height", 41)
.attr("rx", 10)
.attr("stroke-width", 2)
.attr("stroke", "#7E7E7E")
.style('cursor', 'move')
.style("fill", "none");
//Draw the Circle
var circle = svgContainer.append("circle")
.attr("cx", 35)
.attr("cy", 145)
.attr("r", 25)
.style("stroke-opacity", .9)
.style("stroke", "green")
.style("stroke-width", 2)
.style('cursor', 'move')
.style("fill", "white");
var circle2 = svgContainer.append("circle")
.attr("cx", 35)
.attr("cy", 225)
.style("stroke-opacity", .9)
.style("stroke-width", 2)
.style("stroke", "red")
.style("fill", "white")
.style('cursor', 'move')
.attr("r", 25);
var circle3 = svgContainer.append("circle")
.attr("id", "circleToClone")
.attr("cx", 35)
.attr("cy", 310)
.attr("r", 25)
.style("fill", "white")
.style("stroke-width", 2)
.style('cursor', 'move')
.style("stroke", "#CDB483");
var dragGroup = 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, i) {
g = this;
console.log(g);
translate = d3.transform(g.getAttribute("transform")).translate;
x = d3.event.dx + translate[0],
y = d3.event.dy + translate[1];
d3.select(g).attr("transform", "translate(" + x + "," + y + ")");
d3.event.sourceEvent.stopPropagation();
});
var group = svgContainer.append("g")
.attr("id", "mygroup")
.call(dragGroup)
.style('cursor', 'move')
.attr("transform", "translate(20, 20)");
group.append("rect")
.attr("x", 250)
.attr("y", 250)
.attr("width", 151)
.attr("height", 141)
.attr("rx", 10)
.attr("stroke-width", 2)
.attr("stroke", "#7E7E7E")
.style("fill", "white");
group.append("circle")
.attr("cx", 330)
.attr("cy", 330)
.attr("r", 25)
.style("fill", "white")
.style("stroke-width", 1)
.style("stroke", "red");
var drag = d3.behavior.drag()
.origin(function ()
{
var t = d3.select(this);
return {x: t.attr("cx"), y: t.attr("cy")};
})
.on('dragend', function (d) {
var mouseCoordinates = d3.mouse(this);
if (mouseCoordinates[0] > 170) {
//Append new element
var circle2 = d3.select("svg").append("circle")
.classed("drg", true)
.attr("cx", 100)
.attr("cy", 100)
.attr("r", 20)
.attr("cx", mouseCoordinates[0])
.attr("cy", mouseCoordinates[1])
.style("fill", "white")
.style("stroke-width", 2)
.style("stroke", "#CDB483");
}
});
circle.call(drag);
circle2.call(drag);
circle3.call(drag);
};
</script>
</head>
<body>
<div id="container">
<div id="header" style="margin-bottom: 0;">
<h1 id="title">Editor</h1>
<div id="footer"></div>
</div>
</div>
</body>
</html>回答 1
Stack Overflow用户
发布于 2015-07-13 22:32:08
当“拖放”一个圆时，您可以使用d3.transform来获取g元素的当前平移，然后检查鼠标的坐标是否位于组中的矩形内。
然后，您可以将一个新圆附加到group，其中它的坐标由鼠标的坐标和组的平移确定，它的笔划由拖动到组的圆的笔划决定。
因此，您的.on("dragend"函数现在应该如下所示：
var mouseCoordinates = d3.mouse(this);
var groupTransform = d3.transform(group.attr("transform"));
var groupX = groupTransform.translate[0];
var groupY = groupTransform.translate[1];
var rect = group.select("rect");
var rectX = +rect.attr("x");
var rectY = +rect.attr("y");
var rectWidth = +rect.attr("width");
var rectHeight = +rect.attr("height");
if (mouseCoordinates[0] > groupX + rectX
&& mouseCoordinates[0] < groupX + rectX + rectWidth
&& mouseCoordinates[1] > groupY + rectY
&& mouseCoordinates[1] < groupY + rectY + rectHeight) {
//Append new element
var newCircle = group.append("circle")
.classed("drg", true)
.attr("cx", mouseCoordinates[0] - groupX)
.attr("cy", mouseCoordinates[1] - groupY)
.attr("r", 20)
.style("fill", "white")
.style("stroke-width", 2)
.style("stroke", d3.select(this).style("stroke"));
}仍然有很多东西你可以修改并添加到你的代码中，让它变得更好，但这应该会让你开始。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/31384665
复制相关文章
相似问题
腾讯云开发者
