Перетащите элементы управления из контейнера и отпустите/нарисуйте их на холсте.

Я хочу разрешить пользователю перетаскивать значки из одного контейнера div, бросать и рисовать их на холсте, сохраняя исходный значок нетронутым. Значки динамически добавляются в таблицу. Я также хочу создать эффект перетаскивания значка курсором, когда я перетаскиваю значок. Когда я использую свойство «helper: 'clone'», я получаю эффект, но отброшенная позиция неверна, и когда я удаляю это свойство, исходный значок удаляется.

Мой родительский контейнер для иконок

     <div id="dvEquipmentTool" style="removed: absolute; border: 1px solid rgb(173, 201, 247);
    display: block; background-color: white; height: 400px; z-index: 50000; padding: 3px;
    removed 100px; removed 50px; width: 200px !important;" class="ui-draggable">
    <table id="tbEquipmentTool" border="0" style="background-color: White; padding-left: 10px;
        max-height: 400px !important;">
        <tbody>
            <tr id="tRow1">
                <td>
                    <img src="" id="imgEquipIcon1" class="ui-draggable" style="position: relative; left: 473px;
                        top: 183px;">
                </td>
                <td>
                    <span id="lblImgEquipName1" class="label">10-FL-105-A20</span><span id="lblImgEquipID1"
                        class="label" style="display: none;">100200</span>
                </td>
                <td width="10px">
                </td>
            </tr>
            <tr id="tRow2">
                <td>
                    <img src="" id="imgEquipIcon2" class="ui-draggable" style="position: relative;">
                </td>
                <td>
                    <span id="lblImgEquipName2" class="label">10-FL-3111-A20</span><span id="lblImgEquipID2"
                        class="label" style="display: none;">100199</span>
                </td>
                <td width="10px">
                </td>
            </tr>
        </tbody>
    </table>
</div>

Функция Javascript для перетаскивания изображений

    $("img[id^=imgEquipIcon]").each(function () {


    $(this).draggable({ containment: "#dvContainer", scroll: false,//helper: 'clone',
        stop: function (event, ui) {
            var stoppos = $(this).position();
            alert(stoppos.left+","+ stoppos.top);

            var img = new Image();
            img.src = this.src;
            createEquipIcon(img, stoppos.left, stoppos.top);

        }

    });

});

function createEquipIcon(img, X, Y) {
    var dv = document.createElement('div');

    $(dv).css('top', Y);
    $(dv).css('left', X);
    $(dv).css('cursor', 'move');
    $(dv).css('position', 'absolute');
    $(dv).css('background-color', 'red');

    dv.appendChild(img);
    var index = img.id.replace('imgEquipIcon', '');

    var container = document.getElementById('dvContainer');
    container.appendChild(dv);
   //code for drawing on canvas goes here

}

Холст для рисования изображений

    <div id="dvContainer" runat="server" style="overflow: visible; background-repeat: no-repeat">
            <canvas id="myCanvas" width="1000px" height="600px">
          <b> *Your browser doesn't support canvas. Please switch to different browser.</b>
        </canvas>

javascript canvas html jquery
person hampi2017    schedule 28.02.2014    source источник

Ответы (1)


arrow_upward
6
arrow_downward

Демонстрация: http://jsfiddle.net/m1erickson/cyur7/

До перетаскивания и после перетаскивания:

введите здесь описание изображениявведите здесь описание изображения

Создать HTML-панель инструментов

  • создайте div для хранения всех значков инструментов.
  • создайте элементы img для каждого из ваших инструментов и поместите их в div панели инструментов
  • дать всем инструментам img класс = "инструмент"

Раздел панели инструментов HTML с изображением инструментов:

<div id="toolbar">
    <img class="tool" width=32 height=32 src="equipment1.jpg">
    <img class="tool" width=32 height=32 src="equipment1.jpg">
    <img class="tool" width=32 height=32 src="equipment1.jpg">
</div>

Сделайте все инструменты .tools перетаскиваемыми с помощью jQuery

  • выберите все .tools в jquery ($tools)
  • сделать все .tools перетаскиваемыми
  • дать всем .tools полезные данные с их индексом в $tools.

Сделать все инструменты .tools перетаскиваемыми:

    // select all .tool's

    var $tools=$(".tool");

    // make all .tool's draggable

    $tools.draggable({ helper:'clone' });


    // assign each .tool its index in $tools

    $tools.each(function(index,element){
        $(this).data("toolsIndex",index);
    });

Сделайте холст целью перетаскивания:

    // make the canvas a dropzone
    $canvas.droppable({
        drop:dragDrop,
    });

При сбросе нарисуйте изображение на холсте

  • получить точку падения droppable
  • получить полезную нагрузку данных отбрасываемого (индекс отброшенного элемента в $tools)
  • используйте context.drawImage, чтобы нарисовать перетащенное изображение на холсте

Обработчик удаления

    // handle a drop into the canvas
    function dragDrop(e,ui){

        // get the drop point (be sure to adjust for border)
        var x=parseInt(ui.offset.left-offsetX)-1;
        var y=parseInt(ui.offset.top-offsetY);

        // get the drop payload (here the payload is the $tools index)
        var theIndex=ui.draggable.data("toolsIndex");

        // drawImage at the drop point using the dropped image 
        ctx.drawImage($tools[theIndex],x,y,32,32);

    }
person markE    schedule 28.02.2014