Javascript 将一个对象限制在另一个对象内

这与SVG有关，我有一个由路径组成的大型SVG对象，它保持静态。只需按下一个按钮，我就可以在较大的对象中创建另一个SVG对象。可以使用鼠标向下拖动第二个对象

问题：
现在我想添加一个限制，以便创建的第二个对象不能超出主对象

我尝试使用“mouseup”进行限制，但这不起作用，因为限制是根据第二个对象上的光标点而不是第二个对象的边界应用的

希望有人能帮忙

更新：

@Phrogz：我们一直在努力让Kevin的代码正常工作，但我们很难得到任何结果。我们有一个附加到onmouseup的函数，用于查找对象在下方路径上的交点

假设该函数给出交叉口的结果，并发出函数已执行的警报。它没有给出任何回应，这让我们怀疑该函数是否正在执行

以下是主要代码：

var path=svgDoc.getElementById("path");


var str=intersectPathShape(path,DragTarget);
     alert(str)

---

Phrogz，你有什么想法吗？

你需要使用一个交叉点库来检测路径何时重叠并防止重叠。（他还提供。）

根据您实现拖动的方式，您可能还需要选择两个项目中的一个，以确保其中一个包含在另一个项目中（因为将子项完全拖动到父项之外会导致它们不相交，但也不是合法位置）

最简单的代码是存储子对象的最后一个位置，并在检测到交叉点时将其返回到该位置。但是，在快速拖动下，这可能会导致孩子停止在实际不接触的位置被拖动。为了获得更好的用户体验，您可能希望尝试对最后一个已知良好位置和当前位置之间的中间偏移量进行二进制搜索，以找到沿该路径的合法最近点。

Kayote

我想我用另一个问题回答了这个问题。简短的版本是查看此github项目：

特别是，此文件中的loadShapes函数：

您将需要实例化每个节点类型的特定对象，然后将这些对象传递给Intersection.intersectShapes

嗯,，

---

凯文

谢谢弗罗兹。如果这是一个非常复杂的解决方案（至少对我来说），那将是非常有帮助和有用的。仅仅修改凯文的代码是一项壮举…@Kayote我认为你不需要修改他的代码，而是将其用作一个黑盒，只需测试返回的交叉口数。哦，太棒了，我会检查它并让你返回。为弗罗兹干杯。