Javascript 用Cytoscape限制跌落面积

我正在尝试使用Cytoscape制作一个网页设计师，我想设置一个限制区域，用户可以在其中放置节点。本质上：用户可以将一个节点从“画布”（CSS中的一个矩形）中删除，然后它们就会丢失。如下图所示：

如您所见，我的节点形状为矩形，可以从我试图限制的区域中删除。我该怎么办？

---

谢谢

以下代码段使用内置函数和扩展

document.addEventListener（“DOMContentLoaded”，function（））{
var cy=（window.cy=cytoscape）({
容器：document.getElementById（“cy”），
风格：[{
选择器：“节点”，
风格：{
内容：“数据（id）”
}
},
{
选择器：“边缘”，
风格：{
“目标箭头形状”：“三角形”
}
},
{
选择器：“：已选定”，
样式：{}
}
],
要素：{
节点：[{
数据：{
id:“n0”
}
},
{
数据：{
id:“n1”
}
},
{
数据：{
id:“n2”
}
},
{
数据：{
id:“n3”
}
},
{
数据：{
id:“n4”
}
},
{
数据：{
id:“n5”
}
},
{
数据：{
id:“n6”
}
},
{
数据：{
id:“n7”
}
},
{
数据：{
id:“n8”
}
},
{
数据：{
id:“n9”
}
},
{
数据：{
id:“n10”
}
},
{
数据：{
id:“n11”
}
},
{
数据：{
id:“n12”
}
},
{
数据：{
id:“n13”
}
},
{
数据：{
id:“n14”
}
},
{
数据：{
id:“n15”
}
},
{
数据：{
id:“n16”
}
}
],
边缘：[{
数据：{
资料来源：“n0”，
目标：“n1”
}
},
{
数据：{
资料来源：“n1”，
目标：“n2”
}
},
{
数据：{
资料来源：“n1”，
目标：“n3”
}
},
{
数据：{
资料来源：“n4”，
目标：“n5”
}
},
{
数据：{
资料来源：“n4”，
目标：“n6”
}
},
{
数据：{
资料来源：“n6”，
目标：“n7”
}
},
{
数据：{
资料来源：“n6”，
目标：“n8”
}
},
{
数据：{
资料来源：“n8”，
目标：“n9”
}
},
{
数据：{
资料来源：“n8”，
目标：“n10”
}
},
{
数据：{
资料来源：“n11”，
目标：“n12”
}
},
{
数据：{
资料来源：“n12”，
目标：“n13”
}
},
{
数据：{
资料来源：“n13”，
目标：“n14”
}
},
{
数据：{
资料来源：“n13”，
目标：“n15”
}
}
]
},
布局：{
姓名：“dagre”，
填充：50
}
}));
//演示你的核心ext
西蒙德拉格酒店({
/*这里的选项*/
});
cy.on（'tapdrag'，'node'，function（）{
cy.fit（cy.elements（），50）；
cy.center（）；
})
});
正文{
字体系列：helvetica neue、helvetica、liberation sans、arial、sans serif；
字体大小：14px；
}
#赛义德{
位置：绝对位置；
宽度：60%；
身高：60%；
边框：1px纯色灰色；
}

Hi@rmdez，您需要进一步澄清这个问题。在这种状态下，将是一个很好的开始改进的点。关于你的问题，你认为拖放功能应该是什么样的？是否要将节点从一个复合父节点拖放到另一个复合父节点？这与你的问题有关吗？如果没有，你想实现什么？请在你的问题中澄清这一点对不起，我认为这已经足够清楚了。。。我真正想做的是禁止用户将节点从特定区域中删除。这是因为，虽然我已经用CSS“画”出了这个区域应该有多大，但我可以将节点移动到画布边缘以下，它们就会丢失。我添加了一幅我试图描述的问题的图片，以防万一它会有所帮助！