Joint.js 在新的克隆元素上触发拖动开始

Posted 2023-05-07

【中文标题】Joint.js 在新的克隆元素上触发拖动开始

【英文标题】：joint.js trigger drag start on a new cloned element

【发布时间】：2014-01-23 22:08:00

【问题描述】：

如何在关节 js 中对克隆的关节元素触发指针向下/拖动启动？ toolBoxPointerDown 在工具箱纸上触发pointerdown 事件时触发。 当pointerup 事件在_this.paperDrag 上触发时触发addNode。

var toolBoxPointerDown = function(cell, event) 
        _this.action = 'addNode';
        $(document.body).append(_this.paperDrag.$el); 
        _this.clone = cell.model.clone(), _this.cloneBbox = cell.getBBox();

        _this.clone.set("position", 
            x: cell.model.attributes.position.x,
            y: cell.model.attributes.position.y 
        ), _this.paperDrag.addCell(_this.clone), _this.paperDrag.setDimensions("100%", "100%");

        _this.paperDrag.$el.offset(
            left: 0,
            top: 0
        );

        _this.paperDrag.findViewByModel(_this.clone.id).pointerdown();
    

    var addNode = function(node, position) 
        var celltoAdd = _this.clone.clone();
        celltoAdd.set('position',  x: _this.clone.get('position').x - $('.toolbox').width(), y: _this.clone.get('position').y );


        if(celltoAdd.attributes.position.x > - 50)
            renderNode(celltoAdd.attributes);
        
         _this.paperDrag.$el.detach();
        _this.clone.remove();
        _this.action = 'nodeAdded';
    

【参考方案1】：

将此代码添加到您的论文生成器中：

_this.paperDrag.on('element:pointerup', this.addNode , this);
_this.paperDrag.on('element:pointerdown', this.toolBoxPointerDown , this);

---

一些解释：joint.dia.ElementView内置了pointerdown和pointerup，这两个函数的最后一行代码使得notify是这样的：

this.notify('element:pointerdown', evt, x, y);

并且您的paper.on('element:pointerdown') 在该通知产生后被执行。