Javascript 膀胱镜超出了画布边界

我尝试将对象包含在cytoscape画布内，而不移动到最大宽度和高度之外，但如果我将对象拖动到画布内，它们将超出画布边界：

事实上，我没有使用HTML5的画布，而是使用cytoscape.js插件的画布，因此修复它会变得更复杂。 我已经看过了cystoscape文档，看看是否有任何选项可以修复边框并使其中的内容具有响应性，但没有发现任何内容

我想知道是否有任何方法可以欺骗这个

我的代码测试：

``

---

``

与任何画布对象一样，您需要“侦听”拖动事件并根据位置采取操作

下面的代码是一个正确的方向，我只是显示元素被拖动时的位置，接下来需要设置区域边界并防止元素向外移动

tippy（“cyto”）；
cy=细胞景观({
容器：document.getElementById（“cyto”），
风格：细胞景观
.stylesheet（）
.选择器（“节点”）
.css（{content:“数据（id）”}），
要素：[
{数据：{id:“单词”}，
{数据：{id:“现实”}
]
});
cy.on（'drag'，'node'，函数（evt）{
var节点=evt.target；
var point=node.point（）；
console.log（node.id（）+“”+point.x+“”+point.y）；
如果（点y<10）
style（{'background color'：'red'}）；
其他的
style（{'background color'：'blue'}）；
});
.container{
显示：网格；
边框：2个蓝色实心；
高度：160px；
宽度：400px；
}
#细胞的{
网格行：2/跨1；
格构柱：1/6跨；
}

我不太明白。是否要防止节点在拖动时离开cytoscape.js边界？@StephanT.yes，这是我的问题。这是否回答了您的问题@StephanT.也许可以，但首先我需要知道这个扩展是如何工作的。感谢您的建议，我将看看是否可以将边界位置与节点xy坐标相匹配。我在代码中添加了一个if语句，在
y
小于10时更改节点的颜色。它可以用于每个节点，但我想知道是否有可能获得节点的孔元素列表的位置，因为也有可能拖动孔列表：也必须有一个事件。。。检查文档：
 $(document).ready(function () {
 // document.addEventListener('DOMContentLoaded', function() {

 $('#cyto').attr("title", "try clicking and dragging around the canvas and nodes");


 tippy('#cyto')

 cy = cytoscape({
     container: document.getElementById('cyto'),


     style: cytoscape.stylesheet()

         // style for the nodes
         .selector('node')
         .css({
             'width': 70,
             'height': 70,
             'content': 'data(id)',
             'text-align': 'center',
             'color': '#506874',
             'background-color': '#20b2aa',
             'font-family': 'Oswald',
             'shape': 'roundrectangle',
             'font-size': 20

         })

         // style for the connecting lines
         .selector('edge')
         .css({
             'width': .9,
             'height': 0.2,
             'curve-style': 'bezier',
             'target-arrow-shape': 'triangle',
             'target-arrow-color': '#F3A712',
             'line-color': '#F3A712',
             // 'line-color': '#C40E0E',

         })
         .selector(':selected')
         .css({
             'background-color': '#428bca',
             'line-color': '#C40E0E',
             'target-arrow-color': '#C40E0E',
             'source-arrow-color': '#C40E0E'
         })
         .selector('.faded')
         .css({
             'opacity': 1,
             'text-opacity': 0
         }),

     elements: [
         {
             group: 'nodes',
             data: {
                 id: 'WORDS'
             }
      }, {
             group: 'nodes',
             data: {
                 id: 'REALITY'
             }
      },
         {
             group: 'nodes',
             data: {
                 id: 'THE WORLD'
             }
      },

         {
             group: 'nodes',
             data: {
                 id: 'PEOPLE'
             }
      },

         {
             group: 'nodes',
             data: {
                 id: 'ME'
             }
      },
         {
             group: 'edges',
             data: {
                 id: 'edge1',
                 source: 'PEOPLE',
                 target: 'WORDS'
             }
      },

         {
             group: 'edges',
             data: {
                 id: 'edge2',
                 source: 'PEOPLE',
                 target: 'REALITY'
             }
      },
         {
             group: 'edges',
             data: {
                 id: 'edge3',
                 source: 'ME',
                 target: 'WORDS'
             }
      },
         {
             group: 'edges',
             data: {
                 id: 'edge4',
                 source: 'WORDS',
                 target: 'THE WORLD'
             }
      },
         {
             group: 'edges',
             data: {
                 id: 'edge',
                 source: 'THE WORLD',
                 target: 'ME'
             }
      },
         {
             group: 'edges',
             data: {
                 id: 'edge6',
                 source: 'PEOPLE',
                 target: 'THE WORLD'
             }
      },
         {
             group: 'edges',
             data: {
                 id: 'edge7',
                 source: 'ME',
                 target: 'THE WORLD'
             }
      },

         {
             group: 'edges',
             data: {
                 id: 'edge9',
                 source: 'WORDS',
                 target: 'REALITY'
             }
      },
         {
             group: 'edges',
             data: {
                 id: 'edge5',
                 source: 'REALITY',
                 target: 'ME'
             }
      }
    ],
 }); // end cytoscape
 }, false);