Событие перетаскивания не работает с функцией onload

Когда я удаляю функцию onload, событие dragend запускается, но форма не выполняется, и если я использую onload-функцию, форма рисуется, но функция dragend не запускается.Событие перетаскивания не работает с функцией onload

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>

Является ли это ошибка? События перетаскивания не работают на кнопках?

источник

2015-09-11 Satyadev

Я вполне уверен, что clientX и т. Д. Зарезервированы, поэтому вы не можете использовать их в качестве имен переменных. – TricksfortheWeb

Вы понимаете, что объем ваших переменных различен? – epascarello

@ yak613 Пробовал изменять имена переменных, но все еще не работает – Satyadev

Я думаю, проблема может заключаться в том, что сустав переопределяет свойства дочерних элементов <canvas>, когда он рисует вашу форму там. При перемещении <button> элемента за пределами <canvas>, то ondragend пожары:

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

Или же вы хотите, чтобы кнопка и форма будет тот же объект? В приведенном выше коде они представляют собой два разных элемента DOM.

источник

2015-09-11 21:07:23 rphv

Я подумал об этом вчера вечером ... Когда я перетаскиваю кнопку на SVG, она не стреляет туда, где, когда я перетаскиваю ее в div, перетаскивание события заканчивается. Как это исправить? – Satyadev

Событие перетаскивания не работает с функцией onload

ответ

Смежные вопросы