Перетащите в нативный JavaScript - PullRequest
Новая
       8

Перетащите в нативный JavaScript

0 голосов
/ 21 мая 2018

Я разрабатываю какой-то редактор BPMN.enter image description here

При каждом перетаскивании изображения с панели инструментов на холст я ожидаю увидеть новый объект groupObject.Но это работает только с первым элементом (прямоугольником) и только в первый раз.Поскольку был добавлен один элемент, событие onDrop не сработало, и я получил свой img.png в новом окне вместо groupObject.

HTML-блок 

    <div id="toolbarPanel">
        <h4>Toolbar</h4>

        <img class="rectangle" src="/Content/img/rectangle.png" draggable="true" ondragstart="dragElement(event)" alt="rectangle"/>
        <img class="circle" src="/Content/img/circle.png" draggable="true" ondragstart="dragElement(event)" alt="circle"/>
    </div>
    <canvas id="flowCanvas" width="800" height="800" ondrop="dropElement(event, this)" ondragover="allowDrop(event)"></canvas>
    <div id="props">
        <h4>Properties</h4>
    </div>

Script-block 

    var dragElementType;
    var canvas = document.getElementById('flowCanvas');

    function allowDrop(ev) {
        ev.preventDefault();
    }

    function dragElement(ev) {
        ev.dataTransfer.setData("image/png", ev.target.className);
        dragElementType = ev.target.className;
    }

    function dropElement(ev) {
        ev.preventDefault();
        var mousePos = getMousePos(canvas, ev);

        drawFlowObj(dragElementType, mousePos.x, mousePos.y);
    }

    function getMousePos(canvas, evt) {
        var rect = canvas.getBoundingClientRect();
        return {
            x: evt.clientX - rect.left,
            y: evt.clientY - rect.top
        };
    }

Итак, вопрос в том, как заставить DnD работать для всех фигур каждый раз, когда я перетаскиваю его, а не только в первый раз.Я видел этот вопрос , но я хочу избежать jQuery, если это возможно.Может быть, кто-то может просто объяснить, какие шаги мне нужно сделать.

...