Question

当我删除onload函数时，会触发dragend事件但是没有绘制形状，如果我使用onload函数，则会绘制形状但不会触发dragend函数。

window.onload = function ()
{
    var shapeId = "";
    var graph = new joint.dia.Graph;
    var paper = new joint.dia.Paper({
        el: $('#canvas'),
        id: 'myPaper',
        model: graph,
        gridSize: 1
    });

    joint.shapes.devs.TooledModel = joint.shapes.devs.Model.extend(_.extend({}, joint.plugins.TooledModelInterface, {
        markup: '<g class="rotatable"><g class="scalable"><rect class="body"/></g><text class="t"/><g class="inPorts"/><g class="outPorts"/><g class="moveTool"/><g class="resizeTool"/><g class="portsTool"/></g>',
        defaults: joint.util.deepSupplement({
            type: 'devs.TooledModel',
            portsTool: false,
            moveTool: false,
            resizeTool: false,
            position: {x: 200, y: 100},
            size: {width: 71, height: 625},
            attrs: {
                'text': {'font-size': 14, text: '', 'ref-x': .5, 'ref-y': .5, ref: '.body', 'y-alignment': 'middle', 'x-alignment': 'middle', fill: 'black', 'font-weight': 'normal', 'font-family': 'Arial, helvetica, sans-serif'},
                rect: {stroke: '#008B8B', fill: '#EEEEEE', 'stroke-width': 2}, '.': {magnet: false},
                '.inPorts circle': {type: 'input'},
                '.outPorts circle': {type: 'output'},
                '.port-body': {r: 3}
            }
        }, joint.shapes.devs.Model.prototype.defaults)
    }
    ));
    joint.shapes.devs.TooledModelView = joint.shapes.devs.ModelView.extend(joint.plugins.TooledViewInterface);

    var rect1 = new joint.shapes.devs.TooledModel({
        moveTool: true,
        position: {x: 100, y: 100},
        size: {width: 120, height: 25},
        attrs: {
            text: {text: 'Skill', fill: 'black', 'font-weight': 'bold'},
            rect: {
                fill: '#F9F9F9', rx: 7, ry: 15, opacity: .80, 'stroke-width': 0, stroke: '#fff'
            }
        }
    });
    graph.addCells([rect1]);
};

 var cX, cY, oX, oY;
 var x, y;

//This function is not getting called
function createShape(event)
{
    var $stageContainer = $("#canvas");
    var stageOffset = $stageContainer.offset();
    cX = event.clientX;
    cY = event.clientY;
    oX = stageOffset.left;
    oY = stageOffset.top;
    x = clientX - offsetX;
    y = clientY - offsetY;
    console.log(x + "  " + y);
}

HTML：

<body>
  <div id="canvas">
     <button class="btn ic_table" draggable="true" ondragend="createShape(event)"></button>
  </div>
</body>

这是一个错误吗？拖动事件不适用于按钮？

Answer 1

我认为问题可能是当<canvas>的子元素在那里形成时，它会覆盖子元素的属性。如果您将<button>元素移到<canvas>之外，ondragend会触发：

<body>
  <div id="canvas"></div>
  <button draggable="true" ondragend="createShape(event)">My Button</button>
</body>

或者你想要按钮和形状是同一个对象吗？在上面的代码中，它们是两个不同的DOM元素。

拖动事件不适用于onload函数

1 个答案: