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

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

Мой родительский контейнер для значков

10-FL-105-A20100200
10-FL-3111-A20100199

Функция 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 } 

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

  
*Your browser doesn't support canvas. Please switch to different browser.

Демо: http://jsfiddle.net/m1erickson/cyur7/

Перед drag and dropм и drag and dropм:

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

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

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

Панель инструментов html-div с инструментами-imgs:

 

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

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

Сделать все .tools draggable:

  // 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); }); 

Сделать canvas целью для снижения:

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

Когда выпадет, нарисуйте img на canvasе

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

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

  // 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); }