Question

这是显示问题的JSFiddle：https://jsfiddle.net/Bronzdragon/xpvt214o/399003/

<div id="modal" class="modal modal-visible" style="border: 2px solid black; width: 100px; height: 100px;"></div>
<script>
var modal = document.getElementById("modal");
document.addEventListener('keydown', function(e) {
    let keyCode = e.keyCode;
    document.getElementById("result").innerHTML = "Key Code: "+keyCode+"<br/> Key: "+e.key+"<br/>";
    if (keyCode === 27) {//keycode is an Integer, not a String
      modal.classList.remove('modal-visible');
      document.getElementById("result").innerHTML += "Escape key pressed. Modal hidden.";
    }
});
</script>
<div style="width: 100%; text-align: center;">
 <span id="result"></span>
</div>

我正在定义一个JointJS元素（称为rect），上面有两个端口，并将它们添加到图中。元素本身具有功能，但端口没有功能。拖动活动的磁铁（粉红色的圆圈）时，它应该创建一个链接。相反，它移动元素。

我遵循JointJS指南创建形状并添加端口。我添加的这些端口似乎完全不活动。我不知道我在做什么错。

Answer 1

我已经给JointJS团队发送了电子邮件，他们通过以下方式回覆了我（非常感谢您，罗马！）

感谢您与我们联系！你快到了magnet属性用于在特定形状的DOM元素上设置。与fill，refX，xlinkHref等类似。

var rect = new joint.shapes.basic.Rect({
  attrs: {rect: {fill: 'lightblue' }, root: {  magnet: false }},
  size: { width: 200, height: 100 },
  ports: {
    groups: {
      'inputs': {
        position: { name: 'left' },
        attrs: {circle: {fill: 'green', magnet: 'passive' }},

      },
      'outputs': {
        position: { name: 'right' },
        attrs: {circle: {fill: 'red', magnet: true }},    
      }
    },
    items:[ { group: 'inputs' }, { group: 'outputs' } ]
  }
});

此外，如果您不熟悉JointJS，我建议您阅读我们的在线教程（https://resources.jointjs.com/tutorial）。我建议在standard上使用basic形状，因为标准形状是较新的并且反映了最好的JointJS技术。

JointJS端口不起作用

1 个答案: