拖动事件不适用于 onload 功能答案

【问题标题】：drag event is not working with onload function拖动事件不适用于 onload 功能
【发布时间】：2015-09-11 18:50:05
【问题描述】：

当我删除 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>

这是一个错误吗？拖动事件对按钮不起作用？

【问题讨论】：

我很确定 clientX 等是保留的，因此您不能将它们用作变量名。
你意识到你的变量的作用域是不同的吗？
@yak613 尝试更改变量名但仍然无法正常工作
@epascarello，是的，clientX 等变量是运行onload 的函数的本地变量。
@epascarello 是的，这是有道理的.. 尝试更改变量的范围但仍然无法正常工作

标签： javascript html onload jointjs

【解决方案1】：

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

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

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

【讨论】：

我昨晚想通了...当我将按钮拖到 SVG 上时，它没有触发，而当我将它拖到 div 上时，拖动结束事件被触发..我该如何解决这个？