jquery – joint.js触发新克隆元素的拖动开始

前端之家收集整理的这篇文章主要介绍了jquery – joint.js触发新克隆元素的拖动开始前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
如何在关节js中的克隆关节元素上触发pointerdown / dragstart?
在工具箱纸张上触发指针向下事件时触发toolBoxPointerDown.
在_this.paperDrag上触发pointerup事件时会触发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';
    }

解决方法

将此代码添加到您的纸张构建器:
_this.paperDrag.on('element:pointerup',this.addNode,this);
_this.paperDrag.on('element:pointerdown',this.toolBoxPointerDown,this);

一些解释:joint.dia.ElementView内置了pointerdown和pointerup,这两个函数的最后一行代码如下所示:

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

并且你的paper.on(‘element:pointerdown’)在该通知产生后执行.

猜你在找的jQuery相关文章