5

私は JointJS API に取り組んでいます。ただし、要素が元の位置から移動できないようにしたいと考えています。オブジェクトを不動にするために使用できる、JointJS の機能または CSS の一般的な機能を教えてください。

Interactive: false オプションが用紙または用紙で使用できません。 $el.css('pointer-events', 'none'); マウスが要素の上に置かれたときに強調表示機能が必要なためです。

他の機能を許可しながら要素の移動を無効にする方法を提案してください。関連する CSS コード スニペットは次のとおりです。

.viewport {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}
.element {
    /* Give the user a hint that he can drag&drop the element. */
    cursor: crosshair;
    position: fixed;
}
.element * {
    /* The default behavior when scaling an element is not to scale the stroke in order to prevent the ugly effect of stroke with different proportions. */
    vector-effect: non-scaling-stroke;
    -moz-user-select: none;
    user-drag: none;
    position: fixed;
}
4

3 に答える 3

2

このinteractiveオプションでは、function値も使用できます。リンク (より具体的joint.dia.LinkViewにはインスタンス) との対話のみを許可するには、次のようにします。

var paper = new joint.dia.Paper({
  el: $('#paper'),
  width: 400,
  height: 400,
  model: graph,
  interactive: function(cellView, method) {
    return cellView instanceof joint.dia.LinkView; // Only allow interaction with joint.dia.LinkView instances.
  }
});

methodまたは、引数を確認することもできます。method値はpointermove、要素をドラッグしようとしたとき、およびリンクpointerdownをクリックしたときです。

これが役立つことを願っています！

于 2016-08-24T11:38:32.227 に答える