从容器中拖动控件，并将其拖放/绘制在画布上 [英] Drag controls from container and drop/draw them on canvas
本文介绍了从容器中拖动控件，并将其拖放/绘制在画布上的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想允许用户从一个div容器中拖动图标，并将其拖放到画布上，保持原始图标不变。图标动态添加到表中。当我使用帮助：克隆'属性我得到的效果，但丢弃的位置是不正确的，当我删除此属性，原始图标被删除。
我的父图标容器
< div id = dvEquipmentToolstyle =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 =tbEquipmentToolborder =0style =background-color：White; padding-left：10px;
max-height：400px！important;>
< tbody>
< tr id =tRow1> ¥b $ b< td>
< img src =id =imgEquipIcon1class =ui-draggablestyle =position：relative; left：473px;
top：183px;>
< / td>
< td>
< span id =lblImgEquipName1class =label> 10-FL-105-A20< / span>< span id =lblImgEquipID1
class =labelstyle = display：none;> 100200< / span>
< / td>
< td width =10px>
< / td>
< / tr>
< tr id =tRow2>
< td>
< img src =id =imgEquipIcon2class =ui-draggablestyle =position：relative;>
< / td>
< td>
< span id =lblImgEquipName2class =label> 10-FL-3111-A20< / span>< span id =lblImgEquipID2
class =labelstyle = display：none;> 100199< / span>
< / td>
< td width =10px>
< / td>
< / tr>
< / tbody>
< / table>
< / div>
Javascript函数使图像可拖动
$（img [id ^ = imgEquipIcon]）。每个（function（）{
$（this）.draggable #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）;
//在画布上绘制的代码在这里
}
用于绘制图片的画布
< div id =dvContainerrunat =serverstyle =overflow：visible; background -repeat：no-repeat>
< canvas id =myCanvaswidth =1000pxheight =600px>
< b> *您的浏览器不支持canvas。请切换到其他浏览器。< / b>
< / canvas>
解决方案
演示： http://jsfiddle.net/m1erickson/cyur7/
在拖曳和拖后：
>
制作html工具栏
- 创建一个div来保存所有工具图标。
- 创建img元素
Html toolbar-div with tool-imgs：
< div id =toolbar>
< img class =toolwidth = 32 height = 32 src =equipment1.jpg>
< img class =toolwidth = 32 height = 32 src =equipment1.jpg>
< img class =toolwidth = 32 height = 32 src =equipment1.jpg>
< / div>
使用jQuery可拖动所有.tools b
- 在jquery中选择所有.tools（$ tools）
- 使所有.tools draggable
- 将所有.tools的数据有效载荷与$ tools中的索引一起使用。
：
//选择所有.tool的
var $ tools = $ 。工具）;
// make all .tool's draggable
$ tools.draggable（{helper：'clone'}）;
//为每个.tool分配$ tools中的索引
$ tools.each（function（index，element）{
$ ）.data（toolsIndex，index）;
}）;
将画布设为放置目标：
//使画布变为dropzone
$ canvas.droppable（{
drop：dragDrop，
}）;
放置时，在画布上绘制img b
$ b
- 获取droppable的下降点
- 获取droppable的数据有效载荷$ tools）
- 使用context.drawImage在画布上绘制已删除的图片
em> drop handler
//处理一个画布的处理
function dragDrop（e，ui ）{
//获取下降点（请务必调整边框）
var x = parseInt（ui.offset.left-offsetX）-1;
var y = parseInt（ui.offset.top-offsetY）;
//获取下载有效负载（这里的有效负载是$ tools索引）
var theIndex = ui.draggable.data（toolsIndex）;
//使用drop图像在drop point处绘制
ctx.drawImage（$ tools [theIndex]，x，y，32,32）;
}
I want to allow user to drag icons from one div container and drop and draw them on canvas keeping the original icon intact. The icons are added dynamically on table. I also want to give effect of icon dragging with cursor when i drag the icon.When i use " helper: 'clone'" property i get the effect but the dropped position is incorrect and when i remove this property the original icon is removed.
My parent container for icons
<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 function to make images draggable
$("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
}
Canvas for drawing images
<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>
解决方案
Demo: http://jsfiddle.net/m1erickson/cyur7/
Before drag and after drag:
Make an html toolbar
- create a div to hold all the tool icons.
- create img elements for each of your tools and put them in the toolbar div
- give all the tool img's the class="tool"
Html toolbar-div with tool-imgs:
<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>
Make all .tools draggable with jQuery
- select all the .tools in jquery ($tools)
- make all .tools draggable
- give all the .tools a data payload to with their index in $tools.
Make all .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);
});
Make the canvas a drop target:
// make the canvas a dropzone
$canvas.droppable({
drop:dragDrop,
});
When dropped, draw the img on the canvas
- get the drop point of the droppable
- get the data payload of the droppable (the index of the dropped item in $tools)
- use context.drawImage to draw the dropped image on the canvas
Drop handler
// 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);
}
这篇关于从容器中拖动控件，并将其拖放/绘制在画布上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
