HTML 拖放 api getdata undefined
HTML drag and drop api getdata undefined
我的网页有拖放功能，我正在使用 HTML 拖放 API 来实现。我尝试将 SVG 图像拖放到 canvas 中，但它显示未定义，我希望图像在我将其拖放到 canvas.
中时保留在侧边栏中
这是我的屏幕：https://i.stack.imgur.com/P1s50.png
正如您在屏幕上看到的那样，我放下图像后，图像没有显示在 canvas 上并且显示未定义。有什么办法可以解决这个问题吗？
我显示 SVG 的代码
<div class="container mx-0" style="width:100%; max-width: 100vw">
<div class="row">
<div class="sidenav col-1 px-0">
<div class="flex-column menu" id="menu">
<button @click="backHome()" style="padding: 6px 19px"><i class="fas fa-home fa-2x"></i>Home</button>
<button v-for="drawer in drawers" :key="drawer.id" :class="{activeBtn:drawer.id == selected}" @click.prevent="activated(drawer.id)" >
<span v-html="drawer.icon"></span>{{drawer.text}}
</button>
</div>
</div>
<div v-if="!active" class="sub-sidenav col-3" >
<div class="flex-column">
<div class="form-group has-search">
<span class="fa fa-search form-control-feedback"></span>
<input type="text" class="form-control text" placeholder="Search...">
</div>
<div class="row p-3">
<div v-for="drawer in drawers" :key="drawer.id">
<div v-if="drawer.id === selected">
<div class="column" v-for="item in drawer.items" :key="item.id">
<div class="card" style="width: 7rem;height: 7rem">
<div class="card-body">
<span class="center" v-html="item.svg" draggable="true" @dragstart="startDrag($event, item.svg)">{{item.name}}</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="space col-8">
<div id="drop_zone" @dragover.prevent @dragleave.prevent @drop="onDrop($event)" class="workspace">{{workspace}}</div>
</div>
</div>
</div>
脚本
<script>
export default {
data() {
return{
selected: undefined,
active: 'false',
workspace: '',
drawers: [
{
id: 1,
text: "Character",
icon: '<i class="fas fa-users fa-2x"></i>',
items: [
{
id: 1,
name: 'human1',
svg: '<svg xmlns="http://www.w3.org/2000/svg" width="43.808" height="145.733" viewBox="0 0 43.808 145.733">' +
' <g id="Group_9" data-name="Group 9" transform="translate(-1183.765 -369.402)">' +
'<path id="Path_84" data-name="Path 84" d="M568.051,437.983a3.832,3.832,0,0,0,2.548-2.014,3.887,3.887,0,0,0,.1-3.263l14.106-32.131-8.069-2.049-11.328,32.228a3.892,3.892,0,0,0-1.865,4.8,3.841,3.841,0,0,0,4.5,2.432Z" transform="translate(626.349 12.29)" fill="#fff5cd"/>' +
'<path id="Path_85" data-name="Path 85" d="M596.337,403.246l-7.848-3.7a1.737,1.737,0,0,1-.7-2.522l4.77-7.262a4.748,4.748,0,0,1,6.342-2.3,4.821,4.821,0,0,1,2.277,6.394l-2.466,8.318a1.725,1.725,0,0,1-.942,1.083A1.7,1.7,0,0,1,596.337,403.246Z" transform="translate(610.773 19.676)" fill="#fbad6b"/>' +
'<path id="Path_86" data-name="Path 86" d="M335.588,436.026h-4.367l-2.077-16.982h6.445Z" transform="translate(875.771 74.841)" fill="#fff5cd"/>' +
'<path id="Path_87" data-name="Path 87" d="M601.913,678.834h-14.08v-.18a5.5,5.5,0,0,1,5.481-5.525h8.6Z" transform="translate(610.56 -163.699)" fill="#2f2e41"/>' +
'<path id="Path_88" data-name="Path 88" d="M376.588,436.026h-4.367l-2.077-16.982h6.445Z" transform="translate(849.374 74.841)" fill="#fff5cd"/>' +
'<path id="Path_89" data-name="Path 89" d="M642.913,678.834h-14.08v-.18a5.5,5.5,0,0,1,5.48-5.525h8.6Z" transform="translate(584.164 -163.699)" fill="#2f2e41"/>' +
'<path id="Path_90" data-name="Path 90" d="M616.008,525.689q-.059,0-.119,0l-5.022-.375a1.617,1.617,0,0,1-1.448-1.268L600.7,475.788a.534.534,0,0,0-1.055.157l3.1,47.544a1.624,1.624,0,0,1-.421,1.224,1.6,1.6,0,0,1-1.177.519H597.32a1.6,1.6,0,0,1-1.493-1.027c-9.617-25.391-6.134-75.143-6.107-75.643l.356-.359h0l19.155,3.335.041.04c6.545,4.847,9.377,61.606,8.336,72.4a1.943,1.943,0,0,1-.474,1.245,1.6,1.6,0,0,1-1.126.465Z" transform="translate(609.755 -19.546)" fill="#2f2e41"/>' +
'<ellipse id="Ellipse_17" data-name="Ellipse 17" cx="8.748" cy="8.82" rx="8.748" ry="8.82" transform="translate(1192.936 381.911)" fill="#fff5cd"/>' +
'<path id="Path_91" data-name="Path 91" d="M609.9,406.117a1.321,1.321,0,0,1-.265-.027l-22.468-2.907a1.889,1.889,0,0,1-1.335-2.014l2.15-11.968c-2.85-3.591-.157-12.866,1.584-15.21l-.673-1.837a2.3,2.3,0,0,1-.03-1.483,1.817,1.817,0,0,1,.846-1.074l9.118-4.884a1.509,1.509,0,0,1,2.115.987l1.788,4.879-.027.014c4.282,2.314,8.075,4.6,5.226,16.813l3.572,16.863a2.1,2.1,0,0,1-.594,1.418A1.445,1.445,0,0,1,609.9,406.117Z" transform="translate(611.851 34.067)" fill="#fbad6b"/>' +
'<path id="Path_92" data-name="Path 92" d="M553.047,416.918a3.759,3.759,0,0,1,.4.441l17.622-1.228,1.89-3.884,6.187,2.11-2.684,7.2a2.849,2.849,0,0,1-2.883,1.854l-20.039-1.532a3.723,3.723,0,0,1-4,1.438,3.78,3.78,0,0,1-.693-7.017,3.715,3.715,0,0,1,4.207.613Z" transform="translate(637 3.497)" fill="#fff5cd"/>' +
'<path id="Path_93" data-name="Path 93" d="M613.881,399.861a1.626,1.626,0,0,1,.052-1.345l3.634-7.236a4.444,4.444,0,0,1,5.621-2.857,4.5,4.5,0,0,1,2.834,5.667l-1.4,8.014a1.616,1.616,0,0,1-.758,1.108,1.591,1.591,0,0,1-1.327.145l-7.681-2.578a1.606,1.606,0,0,1-.976-.918Z" transform="translate(593.868 18.911)" fill="#fbad6b"/>' +
'<ellipse id="Ellipse_18" data-name="Ellipse 18" cx="7.124" cy="7.182" rx="7.124" ry="7.182" transform="translate(1199.474 369.402)" fill="#2f2e41"/>' +
'<path id="Path_94" data-name="Path 94" d="M567.6,323.04a3.7,3.7,0,0,1-2.062-.174A2.47,2.47,0,0,1,564.312,321c-1.327-8.891,6.172-8.16,7.059-8.545a9.724,9.724,0,0,0,1.568-1.154,7.283,7.283,0,0,1,4.1-.909,11.724,11.724,0,0,1,4.979.614,7.481,7.481,0,0,1,3.309,3.075,15.6,15.6,0,0,1,1.641,4.285,10.778,10.778,0,0,1,.279,5.253,6.455,6.455,0,0,1-5.848,4.725,4.873,4.873,0,0,0-2.544-5.324,7.3,7.3,0,0,0-4.85-.582,21.183,21.183,0,0,1-3.217.4C569.724,322.886,568.451,322.949,567.6,323.04Z" transform="translate(625.804 68.782)" fill="#2f2e41"/>' +
'</g>' +
'</svg>'
},
{
id: 2,
name: 'human2',
svg: '<svg xmlns="http://www.w3.org/2000/svg" width="60.573" height="139.408" viewBox="0 0 60.573 139.408">' +
'<g id="Group_10" data-name="Group 10" transform="translate(-364.839 -95.836)">' +
'<path id="Path_101" data-name="Path 101" d="M406.917,367.962a3.321,3.321,0,0,0-2.721,1.012,3.674,3.674,0,0,0-1.007,2.835l-11.1,5.118,5.294,3.581,9.727-5.409a3.618,3.618,0,0,0-.2-7.137Z" transform="translate(15.37 -246.348)" fill="#fff5cd"/>' +
'<ellipse id="Ellipse_26" data-name="Ellipse 26" cx="8.334" cy="8.733" rx="8.334" ry="8.733" transform="translate(369.187 97.763)" fill="#fff5cd"/>' +
'<path id="Path_102" data-name="Path 102" d="M110.666,433.556h4.16l1.979-16.814h-6.14Z" transform="translate(281.939 -202.537)" fill="#fff5cd"/>' +
'<path id="Path_103" data-name="Path 103" d="M345.178,671.685h8.193a5.35,5.35,0,0,1,5.221,5.471v.178H345.178Z" transform="translate(46.365 -442.089)" fill="#2f2e41"/>' +
'<path id="Path_104" data-name="Path 104" d="M59.666,433.556h4.16L65.8,416.742h-6.14Z" transform="translate(315.633 -202.537)" fill="#fff5cd"/>' +
'<path id="Path_105" data-name="Path 105" d="M294.178,671.685h8.193a5.35,5.35,0,0,1,5.221,5.471v.178H294.178Z" transform="translate(80.06 -442.089)" fill="#2f2e41"/>' +
'<path id="Path_106" data-name="Path 106" d="M293.522,546.53a1.634,1.634,0,0,1-.517-1.195l-.2-63.006,21.724-.877.16-.006,3.573,37.793.448,24.076a1.572,1.572,0,0,1-1.348,1.62l-5.273.65a1.479,1.479,0,0,1-1.171-.373,1.629,1.629,0,0,1-.533-1.154l-.939-25.578-4.558-15.924a.5.5,0,0,0-.558-.3.526.526,0,0,0-.411.5l-1.774,41.872a1.569,1.569,0,0,1-1.338,1.506l-6.089.785a1.477,1.477,0,0,1-1.2-.388Z" transform="translate(80.965 -319.492)" fill="#2f2e41"/>' +
'<path id="Path_107" data-name="Path 107" d="M277.416,405.1l-6.436-27.389c-2.005-8.534,2.576-17.127,10.212-19.155a12.475,12.475,0,0,1,10.556,1.972,15.823,15.823,0,0,1,6.338,10.948l4.2,32.424a1.653,1.653,0,0,1-.35,1.252,1.5,1.5,0,0,1-1.123.563l-21.879.6h-.04A1.552,1.552,0,0,1,277.416,405.1Z" transform="translate(95.698 -240.023)" fill="#fbad6b"/>' +
'<path id="Path_108" data-name="Path 108" d="M332.544,384.227l-16.317-8.305a5.871,5.871,0,0,1-.151-10.254,5.272,5.272,0,0,1,5.732.413l13.2,9.88,14.252-5.947a1.473,1.473,0,0,1,1.673.386l1.922,2.126a1.648,1.648,0,0,1,.408,1.285,1.612,1.612,0,0,1-.679,1.153l-12.759,8.772a7.134,7.134,0,0,1-7.283.491Z" transform="translate(67.532 -244.457)" fill="#fbad6b"/>' +
'<path id="Path_109" data-name="Path 109" d="M281.411,314.339a4.21,4.21,0,0,1-1.9-.411c-.266-.122-.542-.223-.807-.346-2.343-1.083-3.886-4.067-3.941-7.071a11.032,11.032,0,0,1,3.176-7.84,11.188,11.188,0,0,1,6.936-3.136c2.7-.246,5.735.573,7.242,3.26a3.269,3.269,0,0,1,.444,2.447,1.622,1.622,0,0,1-.369.678c-.673.716-1.344.178-2.03.13-.943-.065-1.79.848-2.095,1.918a6.866,6.866,0,0,0,.075,3.339l0,.02a1.9,1.9,0,0,1-.29,1.484,1.731,1.731,0,0,1-1.258.747,7.768,7.768,0,0,1-2.5,0,1.372,1.372,0,0,0-1.864.451,2.8,2.8,0,0,0-.236.814c-.332,1.812-.256,1.7-.588,3.516Z" transform="translate(92.887 -199.658)" fill="#2f2e41"/>' +
'<path id="Path_110" data-name="Path 110" d="M275.343,498.593a3.712,3.712,0,0,0,.582-2.963,3.55,3.55,0,0,0-1.794-2.37l1.563-12.6-5.663,2.894-.616,11.521a3.68,3.68,0,0,0,1.473,4.518,3.332,3.332,0,0,0,4.456-1Z" transform="translate(96.598 -318.986)" fill="#fff5cd"/>' +
'<path id="Path_111" data-name="Path 111" d="M274.229,423.209a1.5,1.5,0,0,1-.318.078l-5.716.757a1.481,1.481,0,0,1-1.2-.388,1.634,1.634,0,0,1-.517-1.2l.045-41.822a5,5,0,0,1,4.126-4.987h0a4.675,4.675,0,0,1,4.011,1.343,5.182,5.182,0,0,1,1.469,4.135l-1.661,18.023.778,22.5a1.591,1.591,0,0,1-1.016,1.567Z" transform="translate(98.362 -251.277)" fill="#fbad6b"/>' +
'</g>' +
'</svg>'
},
]
},
{
id: 2,
text: "Element",
icon: '<i class="fas fa-vector-square fa-2x"></i>',
items: [
{
id: 1,
svg: '<svg xmlns="http://www.w3.org/2000/svg" width="910.908" height="529.584" viewBox="0 0 910.908 529.584">' +
'<g id="Group_58" data-name="Group 58" transform="translate(0 -175.412)">' +
'<ellipse id="Ellipse_436" data-name="Ellipse 436" cx="48.503" cy="98.965" rx="48.503" ry="98.965" transform="translate(648.814 443.805)" fill="#3f3d56"/>' +
'<path id="Path_298" data-name="Path 298" d="M837.384,802.263c19.426-116.551.2-232.682,0-233.84l-3.779.64c.2,1.153,19.315,116.673,0,232.571Z" transform="translate(-144.546 -97.502)" fill="#cacaca"/>' +
'<rect id="Rectangle_50" data-name="Rectangle 50" width="3.833" height="49.74" transform="translate(652.802 524.872) rotate(-61.858)" fill="#cacaca"/>' +
'<rect id="Rectangle_51" data-name="Rectangle 51" width="49.741" height="3.833" transform="translate(699.099 556.718) rotate(-28.158)" fill="#cacaca"/>' +
'<ellipse id="Ellipse_437" data-name="Ellipse 437" cx="94.866" cy="193.564" rx="94.866" ry="193.564" transform="translate(718.989 192.58)" fill="#e6e6e6"/>' +
'<path id="Path_299" data-name="Path 299" d="M947.834,800.179c37.944-227.66.383-454.492,0-456.756l-3.779.64c.383,2.259,37.834,228.48,0,455.487Z" transform="translate(-144.546 -97.502)" fill="#cacaca"/>' +
'<rect id="Rectangle_52" data-name="Rectangle 52" width="3.833" height="97.287" transform="translate(727.657 349.519) rotate(-61.858)" fill="#cacaca"/>' +
'<rect id="Rectangle_53" data-name="Rectangle 53" width="97.287" height="3.833" transform="translate(818.207 415.025) rotate(-28.158)" fill="#cacaca"/>' +
'<path id="Path_300" data-name="Path 300" d="M738.076,800.787h-504.6a7.008,7.008,0,0,1-7-7V474.942a7.008,7.008,0,0,1,7-7h504.6a7.008,7.008,0,0,1,7,7V793.788a7.008,7.008,0,0,1-7,7Z" transform="translate(-144.546 -97.502)" fill="#e4e4e4"/>' +
'<path id="Path_301" data-name="Path 301" d="M279.884,506.579a3,3,0,0,0-3,3V759.151a3,3,0,0,0,3,3H691.671a3,3,0,0,0,3-3V509.579a3,3,0,0,0-3-3Z" transform="translate(-144.546 -97.502)" fill="#fff"/>' +
'<path id="Path_302" data-name="Path 302" d="M695.671,570.859V555.044H637.437V505.579H621.622v49.465H517.947V505.579H502.133v49.465H342.227V505.579H326.412v49.465H271.117v15.815h55.294v61.5H271.117v15.815h55.294v65.9H271.117v15.815H411.636V763.15h15.815V729.886h74.681V763.15h15.815V729.886H695.671V714.071H517.947V648.176H695.671V632.361H637.437v-61.5Zm-193.538,0v19.329H342.227V570.859ZM342.227,606H502.133v26.358H342.227Zm0,108.068v-65.9h69.41v65.9Zm159.906,0H427.451v-65.9h74.681Zm119.49-81.71H517.947v-61.5H621.622Z" transform="translate(-144.546 -97.502)" fill="#e6e6e6"/>' +
'<circle id="Ellipse_438" data-name="Ellipse 438" cx="20.208" cy="20.208" r="20.208" transform="translate(345.286 524.559)" fill="#fbad6b"/>' +
'<path id="Path_303" data-name="Path 303" d="M910.513,705H0v-2.182H910.908Z" fill="#cacaca"/>' +
'<circle id="Ellipse_439" data-name="Ellipse 439" cx="124.655" cy="124.655" r="124.655" transform="translate(243.261 175.412)" fill="#fbad6b"/>' +
'<path id="Path_304" data-name="Path 304" d="M369.135,502.707l-39.382-67.274-39.382-67.274,77.952-.469,77.952-.469L407.7,434.964Z" fill="#fbad6b"/>' +
'<circle id="Ellipse_440" data-name="Ellipse 440" cx="44.724" cy="44.724" r="44.724" transform="translate(324.193 254.559)" fill="#fff"/>' +
'</g>' +
'</svg>'
},
{
id: 2,
svg: '<svg xmlns="http://www.w3.org/2000/svg" width="508.729" height="530.623" viewBox="0 0 508.729 530.623">' +
'<g id="Group_59" data-name="Group 59" transform="translate(0)">' +
'<path id="Path_336" data-name="Path 336" d="M307.688,809.444c-4.337,1.229-8.874-.206-13.341-.267s-9.679,2.092-10.774,7.06c-1.471,6.672,5.33,11.7,11.153,13.364,22.6,6.451,46.523-1.922,69.621,1.493,9.734,1.439,19.2,4.96,28.986,5.8,22.4,1.922,44.288-10.3,66.719-8.918,11.238.69,22.161,4.783,33.4,5.44,26.891,1.571,53.422-16.534,79.747-10.047,7.434,1.832,14.413,5.567,21.778,7.729,18.621,5.468,38.225.594,56.971-4.282,3.722-.968,8.21-2.853,8.668-7.2.506-4.8-4.295-7.8-8.289-9.334-43.677-16.752-90.44-25.627-136-17.884-10.367,1.762-20.705,4.38-31.185,4.207-23.195-.383-44.509-14.259-67.28-19.335-43.147-9.618-86.288,12.82-125.9,34.673" transform="translate(-218.84 -306.476)" fill="#fbad6b" opacity="0.1"/>' +
'<path id="Path_337" data-name="Path 337" d="M429.615,602.735H413.438V730.808s104.412,31.674,205.884,0V602.735Z" transform="translate(-262.064 -241.926)" fill="#3f3d56"/>' +
'<ellipse id="Ellipse_445" data-name="Ellipse 445" cx="101.471" cy="14.46" rx="101.471" ry="14.46" transform="translate(151.375 347.037)" fill="#3f3d56"/>' +
'<ellipse id="Ellipse_446" data-name="Ellipse 446" cx="101.471" cy="14.46" rx="101.471" ry="14.46" transform="translate(151.375 347.037)" opacity="0.1"/>' +
'<path id="Path_338" data-name="Path 338" d="M671.606,251.675c-25.6,88.611-113.276,143.49-113.276,143.49s-46.176-88.788-20.578-177.4S651.027,74.276,651.027,74.276,697.2,163.064,671.606,251.675Z" transform="translate(-300.806 -43.885)" fill="#3f3d56"/>' +
'<path id="Path_339" data-name="Path 339" d="M389.455,251.675c25.6,88.611,113.276,143.49,113.276,143.49s46.176-88.788,20.578-177.4S410.033,74.276,410.033,74.276,363.857,163.064,389.455,251.675Z" transform="translate(-251.525 -43.885)" fill="#fbad6b"/>' +
'<path id="Path_340" data-name="Path 340" d="M362.266,285.94c70.241,64.031,78.82,162.461,78.82,162.461s-105.3-5.384-175.544-69.415-78.821-162.462-78.821-162.462S292.025,221.909,362.266,285.94Z" transform="translate(-186.721 -97.193)" fill="#3f3d56"/>' +
'<path id="Path_341" data-name="Path 341" d="M646.509,285.94C576.268,349.971,567.688,448.4,567.688,448.4s105.3-5.384,175.545-69.415,78.82-162.462,78.82-162.462S716.749,221.909,646.509,285.94Z" transform="translate(-313.324 -97.193)" fill="#3f3d56"/>' +
'<ellipse id="Ellipse_447" data-name="Ellipse 447" cx="32.353" cy="30.297" rx="32.353" ry="30.297" transform="translate(221.963 0)" fill="#fbad6b"/>' +
'<path id="Path_342" data-name="Path 342" d="M277.111,407.875c2.294,7.8,10.264,12.537,10.264,12.537s4.251-7.9,1.957-15.691-10.264-12.537-10.264-12.537S274.817,400.08,277.111,407.875Z" transform="translate(-216.534 -163.022)" fill="#fbad6b"/>' +
'<path id="Path_343" data-name="Path 343" d="M341.362,479.322c-2.469,7.748,1.6,15.726,1.6,15.726s8.075-4.584,10.544-12.332-1.6-15.726-1.6-15.726S343.832,471.574,341.362,479.322Z" transform="translate(-237.847 -191.056)" fill="#fbad6b"/>' +
'<path id="Path_344" data-name="Path 344" d="M802.4,562.676c-6.061,5.759-6.459,14.594-6.459,14.594s9.427-.5,15.488-6.262,6.459-14.594,6.459-14.594S808.464,556.916,802.4,562.676Z" transform="translate(-389.178 -224.567)" fill="#fbad6b"/>' +
'<path id="Path_363" data-name="Path 363" d="M227.111,527.876c2.294,7.8,10.264,12.537,10.264,12.537s4.251-7.9,1.957-15.691-10.264-12.537-10.264-12.537S224.817,520.081,227.111,527.876Z" transform="translate(-199.918 -207.992)" fill="#fbad6b"/>' +
'</g>' +
'</svg>'
}
]
},
{
id: 3,
text: "Background",
icon: '<i class="far fa-file-image fa-2x"></i>',
}
],
}
},
computed: {
},
methods: {
backHome() {
this.$router.push('/');
},
activated(id) {
this.drawers.find(drawer => drawer.id === id)
this.selected = id;
this.active = !this.active;
},
startDrag (evt, item) {
evt.dataTransfer.dropEffect = 'copy'
evt.dataTransfer.effectAllowed = 'copy'
evt.dataTransfer.setData('text/html', item.svg)
console.log(item)
},
onDrop (evt) {
var data = evt.dataTransfer.getData('text/html')
evt.target.textContent = data;
evt.preventDefault();
console.log(data)
// const itemID = evt.dataTransfer.getData('itemID')
// const drawer = this.drawers.find(drawer => drawer.id)
// const item = drawer.items.find(item => item.id == itemID)
// var data = evt.dataTransfer.getData("itemID");
// evt.target.appendChild(document.getElementById(data));
}
},
}
</script>
解决你的问题。第一件事应该是考虑使用 Vue 方式来归档你的目标。
一开始，当拖动开始时，我们可以捕获 item id 而不是将整个 svg 复制到 dom 事件。
<span
class="center"
v-html="item.svg"
draggable="true"
@dragstart="startDrag(item.id)" // passing item id instead of whole svg
>{{ item.name }}</span
>
data() {
...
selectedItemId: -1, // state for storing selected item id
...
}
methods: {
...
startDrag(itemId) {
this.selectedItemId = itemId; // set state to be the selected item id
},
...
}
放置时，我们可以使用 item id 在 drawers -> items
中找到 svg
onDrop() {
// find the SVG in drawers -> items
const selectedItem = this.drawers[0].items.find(
(item) => item.id === this.selectedItemId
);
// append the svg to workspace if item is found
if (selectedItem) {
this.workspace += selectedItem.svg;
}
}
要显示 svg，这有点棘手，因为我不知道你想如何操作 canvas 区域。
例如
- 只显示 1 个 SVG 或
- 显示大量 SVG 或
- SVG 可以在 canvas 等周围移动
为了演示它，我使用了 v-html 标签 不安全 并清理了
<div class="space col-8">
<div
id="drop_zone"
@dragover.prevent
@dragleave.prevent
@drop="onDrop"
class="workspace"
>
<span v-html="workspace"></span>
</div>
</div>
这里是演示用的codesandbox，我没有你的CSS，样式有点不对，但还是可以用的：
https://codesandbox.io/s/dazzling-sea-gh42u?file=/src/components/HelloWorld.vue
使用 vue-movable
调整大小和移动示例
https://codesandbox.io/s/festive-lamport-p57yg?file=/src/components/HelloWorld.vue
成品图：https://i.imgur.com/u0xgf05.png
<div
id="drop_zone"
@dragover.prevent
@dragleave.prevent
@drop="onDrop"
ref="dropZone"
>
<Moveable
class="moveable"
@drag="handleDrag"
@scale="handleScale"
@rotate="handleRotate"
@warp="handleWarp"
v-bind="moveable"
v-for="(wp, index) of workspace"
:key="index"
>
<img :src="wp.svg" />
</Moveable>
</div>
data: {
...
workspace: [],
...
}
onDrop() {
const selectedItem = this.drawers[0].items.find(
(item) => item.id === this.selectedItemId
);
if (selectedItem) {
this.workspace.push(selectedItem);
}
},
handleDrag({ target, transform }) {
console.log("onDrag", transform);
target.style.transform = transform;
},
handleScale({ target, transform }) {
console.log("onScale", transform);
target.style.transform = transform;
},
handleRotate({ target, transform }) {
console.log("onRotate", transform);
target.style.transform = transform;
},
handleWarp({ target, transform }) {
console.log("onWarp", transform);
target.style.transform = transform;
},
我的网页有拖放功能，我正在使用 HTML 拖放 API 来实现。我尝试将 SVG 图像拖放到 canvas 中，但它显示未定义，我希望图像在我将其拖放到 canvas.
中时保留在侧边栏中这是我的屏幕：https://i.stack.imgur.com/P1s50.png
正如您在屏幕上看到的那样，我放下图像后，图像没有显示在 canvas 上并且显示未定义。有什么办法可以解决这个问题吗？
我显示 SVG 的代码
<div class="container mx-0" style="width:100%; max-width: 100vw">
<div class="row">
<div class="sidenav col-1 px-0">
<div class="flex-column menu" id="menu">
<button @click="backHome()" style="padding: 6px 19px"><i class="fas fa-home fa-2x"></i>Home</button>
<button v-for="drawer in drawers" :key="drawer.id" :class="{activeBtn:drawer.id == selected}" @click.prevent="activated(drawer.id)" >
<span v-html="drawer.icon"></span>{{drawer.text}}
</button>
</div>
</div>
<div v-if="!active" class="sub-sidenav col-3" >
<div class="flex-column">
<div class="form-group has-search">
<span class="fa fa-search form-control-feedback"></span>
<input type="text" class="form-control text" placeholder="Search...">
</div>
<div class="row p-3">
<div v-for="drawer in drawers" :key="drawer.id">
<div v-if="drawer.id === selected">
<div class="column" v-for="item in drawer.items" :key="item.id">
<div class="card" style="width: 7rem;height: 7rem">
<div class="card-body">
<span class="center" v-html="item.svg" draggable="true" @dragstart="startDrag($event, item.svg)">{{item.name}}</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="space col-8">
<div id="drop_zone" @dragover.prevent @dragleave.prevent @drop="onDrop($event)" class="workspace">{{workspace}}</div>
</div>
</div>
</div>
脚本
<script>
export default {
data() {
return{
selected: undefined,
active: 'false',
workspace: '',
drawers: [
{
id: 1,
text: "Character",
icon: '<i class="fas fa-users fa-2x"></i>',
items: [
{
id: 1,
name: 'human1',
svg: '<svg xmlns="http://www.w3.org/2000/svg" width="43.808" height="145.733" viewBox="0 0 43.808 145.733">' +
' <g id="Group_9" data-name="Group 9" transform="translate(-1183.765 -369.402)">' +
'<path id="Path_84" data-name="Path 84" d="M568.051,437.983a3.832,3.832,0,0,0,2.548-2.014,3.887,3.887,0,0,0,.1-3.263l14.106-32.131-8.069-2.049-11.328,32.228a3.892,3.892,0,0,0-1.865,4.8,3.841,3.841,0,0,0,4.5,2.432Z" transform="translate(626.349 12.29)" fill="#fff5cd"/>' +
'<path id="Path_85" data-name="Path 85" d="M596.337,403.246l-7.848-3.7a1.737,1.737,0,0,1-.7-2.522l4.77-7.262a4.748,4.748,0,0,1,6.342-2.3,4.821,4.821,0,0,1,2.277,6.394l-2.466,8.318a1.725,1.725,0,0,1-.942,1.083A1.7,1.7,0,0,1,596.337,403.246Z" transform="translate(610.773 19.676)" fill="#fbad6b"/>' +
'<path id="Path_86" data-name="Path 86" d="M335.588,436.026h-4.367l-2.077-16.982h6.445Z" transform="translate(875.771 74.841)" fill="#fff5cd"/>' +
'<path id="Path_87" data-name="Path 87" d="M601.913,678.834h-14.08v-.18a5.5,5.5,0,0,1,5.481-5.525h8.6Z" transform="translate(610.56 -163.699)" fill="#2f2e41"/>' +
'<path id="Path_88" data-name="Path 88" d="M376.588,436.026h-4.367l-2.077-16.982h6.445Z" transform="translate(849.374 74.841)" fill="#fff5cd"/>' +
'<path id="Path_89" data-name="Path 89" d="M642.913,678.834h-14.08v-.18a5.5,5.5,0,0,1,5.48-5.525h8.6Z" transform="translate(584.164 -163.699)" fill="#2f2e41"/>' +
'<path id="Path_90" data-name="Path 90" d="M616.008,525.689q-.059,0-.119,0l-5.022-.375a1.617,1.617,0,0,1-1.448-1.268L600.7,475.788a.534.534,0,0,0-1.055.157l3.1,47.544a1.624,1.624,0,0,1-.421,1.224,1.6,1.6,0,0,1-1.177.519H597.32a1.6,1.6,0,0,1-1.493-1.027c-9.617-25.391-6.134-75.143-6.107-75.643l.356-.359h0l19.155,3.335.041.04c6.545,4.847,9.377,61.606,8.336,72.4a1.943,1.943,0,0,1-.474,1.245,1.6,1.6,0,0,1-1.126.465Z" transform="translate(609.755 -19.546)" fill="#2f2e41"/>' +
'<ellipse id="Ellipse_17" data-name="Ellipse 17" cx="8.748" cy="8.82" rx="8.748" ry="8.82" transform="translate(1192.936 381.911)" fill="#fff5cd"/>' +
'<path id="Path_91" data-name="Path 91" d="M609.9,406.117a1.321,1.321,0,0,1-.265-.027l-22.468-2.907a1.889,1.889,0,0,1-1.335-2.014l2.15-11.968c-2.85-3.591-.157-12.866,1.584-15.21l-.673-1.837a2.3,2.3,0,0,1-.03-1.483,1.817,1.817,0,0,1,.846-1.074l9.118-4.884a1.509,1.509,0,0,1,2.115.987l1.788,4.879-.027.014c4.282,2.314,8.075,4.6,5.226,16.813l3.572,16.863a2.1,2.1,0,0,1-.594,1.418A1.445,1.445,0,0,1,609.9,406.117Z" transform="translate(611.851 34.067)" fill="#fbad6b"/>' +
'<path id="Path_92" data-name="Path 92" d="M553.047,416.918a3.759,3.759,0,0,1,.4.441l17.622-1.228,1.89-3.884,6.187,2.11-2.684,7.2a2.849,2.849,0,0,1-2.883,1.854l-20.039-1.532a3.723,3.723,0,0,1-4,1.438,3.78,3.78,0,0,1-.693-7.017,3.715,3.715,0,0,1,4.207.613Z" transform="translate(637 3.497)" fill="#fff5cd"/>' +
'<path id="Path_93" data-name="Path 93" d="M613.881,399.861a1.626,1.626,0,0,1,.052-1.345l3.634-7.236a4.444,4.444,0,0,1,5.621-2.857,4.5,4.5,0,0,1,2.834,5.667l-1.4,8.014a1.616,1.616,0,0,1-.758,1.108,1.591,1.591,0,0,1-1.327.145l-7.681-2.578a1.606,1.606,0,0,1-.976-.918Z" transform="translate(593.868 18.911)" fill="#fbad6b"/>' +
'<ellipse id="Ellipse_18" data-name="Ellipse 18" cx="7.124" cy="7.182" rx="7.124" ry="7.182" transform="translate(1199.474 369.402)" fill="#2f2e41"/>' +
'<path id="Path_94" data-name="Path 94" d="M567.6,323.04a3.7,3.7,0,0,1-2.062-.174A2.47,2.47,0,0,1,564.312,321c-1.327-8.891,6.172-8.16,7.059-8.545a9.724,9.724,0,0,0,1.568-1.154,7.283,7.283,0,0,1,4.1-.909,11.724,11.724,0,0,1,4.979.614,7.481,7.481,0,0,1,3.309,3.075,15.6,15.6,0,0,1,1.641,4.285,10.778,10.778,0,0,1,.279,5.253,6.455,6.455,0,0,1-5.848,4.725,4.873,4.873,0,0,0-2.544-5.324,7.3,7.3,0,0,0-4.85-.582,21.183,21.183,0,0,1-3.217.4C569.724,322.886,568.451,322.949,567.6,323.04Z" transform="translate(625.804 68.782)" fill="#2f2e41"/>' +
'</g>' +
'</svg>'
},
{
id: 2,
name: 'human2',
svg: '<svg xmlns="http://www.w3.org/2000/svg" width="60.573" height="139.408" viewBox="0 0 60.573 139.408">' +
'<g id="Group_10" data-name="Group 10" transform="translate(-364.839 -95.836)">' +
'<path id="Path_101" data-name="Path 101" d="M406.917,367.962a3.321,3.321,0,0,0-2.721,1.012,3.674,3.674,0,0,0-1.007,2.835l-11.1,5.118,5.294,3.581,9.727-5.409a3.618,3.618,0,0,0-.2-7.137Z" transform="translate(15.37 -246.348)" fill="#fff5cd"/>' +
'<ellipse id="Ellipse_26" data-name="Ellipse 26" cx="8.334" cy="8.733" rx="8.334" ry="8.733" transform="translate(369.187 97.763)" fill="#fff5cd"/>' +
'<path id="Path_102" data-name="Path 102" d="M110.666,433.556h4.16l1.979-16.814h-6.14Z" transform="translate(281.939 -202.537)" fill="#fff5cd"/>' +
'<path id="Path_103" data-name="Path 103" d="M345.178,671.685h8.193a5.35,5.35,0,0,1,5.221,5.471v.178H345.178Z" transform="translate(46.365 -442.089)" fill="#2f2e41"/>' +
'<path id="Path_104" data-name="Path 104" d="M59.666,433.556h4.16L65.8,416.742h-6.14Z" transform="translate(315.633 -202.537)" fill="#fff5cd"/>' +
'<path id="Path_105" data-name="Path 105" d="M294.178,671.685h8.193a5.35,5.35,0,0,1,5.221,5.471v.178H294.178Z" transform="translate(80.06 -442.089)" fill="#2f2e41"/>' +
'<path id="Path_106" data-name="Path 106" d="M293.522,546.53a1.634,1.634,0,0,1-.517-1.195l-.2-63.006,21.724-.877.16-.006,3.573,37.793.448,24.076a1.572,1.572,0,0,1-1.348,1.62l-5.273.65a1.479,1.479,0,0,1-1.171-.373,1.629,1.629,0,0,1-.533-1.154l-.939-25.578-4.558-15.924a.5.5,0,0,0-.558-.3.526.526,0,0,0-.411.5l-1.774,41.872a1.569,1.569,0,0,1-1.338,1.506l-6.089.785a1.477,1.477,0,0,1-1.2-.388Z" transform="translate(80.965 -319.492)" fill="#2f2e41"/>' +
'<path id="Path_107" data-name="Path 107" d="M277.416,405.1l-6.436-27.389c-2.005-8.534,2.576-17.127,10.212-19.155a12.475,12.475,0,0,1,10.556,1.972,15.823,15.823,0,0,1,6.338,10.948l4.2,32.424a1.653,1.653,0,0,1-.35,1.252,1.5,1.5,0,0,1-1.123.563l-21.879.6h-.04A1.552,1.552,0,0,1,277.416,405.1Z" transform="translate(95.698 -240.023)" fill="#fbad6b"/>' +
'<path id="Path_108" data-name="Path 108" d="M332.544,384.227l-16.317-8.305a5.871,5.871,0,0,1-.151-10.254,5.272,5.272,0,0,1,5.732.413l13.2,9.88,14.252-5.947a1.473,1.473,0,0,1,1.673.386l1.922,2.126a1.648,1.648,0,0,1,.408,1.285,1.612,1.612,0,0,1-.679,1.153l-12.759,8.772a7.134,7.134,0,0,1-7.283.491Z" transform="translate(67.532 -244.457)" fill="#fbad6b"/>' +
'<path id="Path_109" data-name="Path 109" d="M281.411,314.339a4.21,4.21,0,0,1-1.9-.411c-.266-.122-.542-.223-.807-.346-2.343-1.083-3.886-4.067-3.941-7.071a11.032,11.032,0,0,1,3.176-7.84,11.188,11.188,0,0,1,6.936-3.136c2.7-.246,5.735.573,7.242,3.26a3.269,3.269,0,0,1,.444,2.447,1.622,1.622,0,0,1-.369.678c-.673.716-1.344.178-2.03.13-.943-.065-1.79.848-2.095,1.918a6.866,6.866,0,0,0,.075,3.339l0,.02a1.9,1.9,0,0,1-.29,1.484,1.731,1.731,0,0,1-1.258.747,7.768,7.768,0,0,1-2.5,0,1.372,1.372,0,0,0-1.864.451,2.8,2.8,0,0,0-.236.814c-.332,1.812-.256,1.7-.588,3.516Z" transform="translate(92.887 -199.658)" fill="#2f2e41"/>' +
'<path id="Path_110" data-name="Path 110" d="M275.343,498.593a3.712,3.712,0,0,0,.582-2.963,3.55,3.55,0,0,0-1.794-2.37l1.563-12.6-5.663,2.894-.616,11.521a3.68,3.68,0,0,0,1.473,4.518,3.332,3.332,0,0,0,4.456-1Z" transform="translate(96.598 -318.986)" fill="#fff5cd"/>' +
'<path id="Path_111" data-name="Path 111" d="M274.229,423.209a1.5,1.5,0,0,1-.318.078l-5.716.757a1.481,1.481,0,0,1-1.2-.388,1.634,1.634,0,0,1-.517-1.2l.045-41.822a5,5,0,0,1,4.126-4.987h0a4.675,4.675,0,0,1,4.011,1.343,5.182,5.182,0,0,1,1.469,4.135l-1.661,18.023.778,22.5a1.591,1.591,0,0,1-1.016,1.567Z" transform="translate(98.362 -251.277)" fill="#fbad6b"/>' +
'</g>' +
'</svg>'
},
]
},
{
id: 2,
text: "Element",
icon: '<i class="fas fa-vector-square fa-2x"></i>',
items: [
{
id: 1,
svg: '<svg xmlns="http://www.w3.org/2000/svg" width="910.908" height="529.584" viewBox="0 0 910.908 529.584">' +
'<g id="Group_58" data-name="Group 58" transform="translate(0 -175.412)">' +
'<ellipse id="Ellipse_436" data-name="Ellipse 436" cx="48.503" cy="98.965" rx="48.503" ry="98.965" transform="translate(648.814 443.805)" fill="#3f3d56"/>' +
'<path id="Path_298" data-name="Path 298" d="M837.384,802.263c19.426-116.551.2-232.682,0-233.84l-3.779.64c.2,1.153,19.315,116.673,0,232.571Z" transform="translate(-144.546 -97.502)" fill="#cacaca"/>' +
'<rect id="Rectangle_50" data-name="Rectangle 50" width="3.833" height="49.74" transform="translate(652.802 524.872) rotate(-61.858)" fill="#cacaca"/>' +
'<rect id="Rectangle_51" data-name="Rectangle 51" width="49.741" height="3.833" transform="translate(699.099 556.718) rotate(-28.158)" fill="#cacaca"/>' +
'<ellipse id="Ellipse_437" data-name="Ellipse 437" cx="94.866" cy="193.564" rx="94.866" ry="193.564" transform="translate(718.989 192.58)" fill="#e6e6e6"/>' +
'<path id="Path_299" data-name="Path 299" d="M947.834,800.179c37.944-227.66.383-454.492,0-456.756l-3.779.64c.383,2.259,37.834,228.48,0,455.487Z" transform="translate(-144.546 -97.502)" fill="#cacaca"/>' +
'<rect id="Rectangle_52" data-name="Rectangle 52" width="3.833" height="97.287" transform="translate(727.657 349.519) rotate(-61.858)" fill="#cacaca"/>' +
'<rect id="Rectangle_53" data-name="Rectangle 53" width="97.287" height="3.833" transform="translate(818.207 415.025) rotate(-28.158)" fill="#cacaca"/>' +
'<path id="Path_300" data-name="Path 300" d="M738.076,800.787h-504.6a7.008,7.008,0,0,1-7-7V474.942a7.008,7.008,0,0,1,7-7h504.6a7.008,7.008,0,0,1,7,7V793.788a7.008,7.008,0,0,1-7,7Z" transform="translate(-144.546 -97.502)" fill="#e4e4e4"/>' +
'<path id="Path_301" data-name="Path 301" d="M279.884,506.579a3,3,0,0,0-3,3V759.151a3,3,0,0,0,3,3H691.671a3,3,0,0,0,3-3V509.579a3,3,0,0,0-3-3Z" transform="translate(-144.546 -97.502)" fill="#fff"/>' +
'<path id="Path_302" data-name="Path 302" d="M695.671,570.859V555.044H637.437V505.579H621.622v49.465H517.947V505.579H502.133v49.465H342.227V505.579H326.412v49.465H271.117v15.815h55.294v61.5H271.117v15.815h55.294v65.9H271.117v15.815H411.636V763.15h15.815V729.886h74.681V763.15h15.815V729.886H695.671V714.071H517.947V648.176H695.671V632.361H637.437v-61.5Zm-193.538,0v19.329H342.227V570.859ZM342.227,606H502.133v26.358H342.227Zm0,108.068v-65.9h69.41v65.9Zm159.906,0H427.451v-65.9h74.681Zm119.49-81.71H517.947v-61.5H621.622Z" transform="translate(-144.546 -97.502)" fill="#e6e6e6"/>' +
'<circle id="Ellipse_438" data-name="Ellipse 438" cx="20.208" cy="20.208" r="20.208" transform="translate(345.286 524.559)" fill="#fbad6b"/>' +
'<path id="Path_303" data-name="Path 303" d="M910.513,705H0v-2.182H910.908Z" fill="#cacaca"/>' +
'<circle id="Ellipse_439" data-name="Ellipse 439" cx="124.655" cy="124.655" r="124.655" transform="translate(243.261 175.412)" fill="#fbad6b"/>' +
'<path id="Path_304" data-name="Path 304" d="M369.135,502.707l-39.382-67.274-39.382-67.274,77.952-.469,77.952-.469L407.7,434.964Z" fill="#fbad6b"/>' +
'<circle id="Ellipse_440" data-name="Ellipse 440" cx="44.724" cy="44.724" r="44.724" transform="translate(324.193 254.559)" fill="#fff"/>' +
'</g>' +
'</svg>'
},
{
id: 2,
svg: '<svg xmlns="http://www.w3.org/2000/svg" width="508.729" height="530.623" viewBox="0 0 508.729 530.623">' +
'<g id="Group_59" data-name="Group 59" transform="translate(0)">' +
'<path id="Path_336" data-name="Path 336" d="M307.688,809.444c-4.337,1.229-8.874-.206-13.341-.267s-9.679,2.092-10.774,7.06c-1.471,6.672,5.33,11.7,11.153,13.364,22.6,6.451,46.523-1.922,69.621,1.493,9.734,1.439,19.2,4.96,28.986,5.8,22.4,1.922,44.288-10.3,66.719-8.918,11.238.69,22.161,4.783,33.4,5.44,26.891,1.571,53.422-16.534,79.747-10.047,7.434,1.832,14.413,5.567,21.778,7.729,18.621,5.468,38.225.594,56.971-4.282,3.722-.968,8.21-2.853,8.668-7.2.506-4.8-4.295-7.8-8.289-9.334-43.677-16.752-90.44-25.627-136-17.884-10.367,1.762-20.705,4.38-31.185,4.207-23.195-.383-44.509-14.259-67.28-19.335-43.147-9.618-86.288,12.82-125.9,34.673" transform="translate(-218.84 -306.476)" fill="#fbad6b" opacity="0.1"/>' +
'<path id="Path_337" data-name="Path 337" d="M429.615,602.735H413.438V730.808s104.412,31.674,205.884,0V602.735Z" transform="translate(-262.064 -241.926)" fill="#3f3d56"/>' +
'<ellipse id="Ellipse_445" data-name="Ellipse 445" cx="101.471" cy="14.46" rx="101.471" ry="14.46" transform="translate(151.375 347.037)" fill="#3f3d56"/>' +
'<ellipse id="Ellipse_446" data-name="Ellipse 446" cx="101.471" cy="14.46" rx="101.471" ry="14.46" transform="translate(151.375 347.037)" opacity="0.1"/>' +
'<path id="Path_338" data-name="Path 338" d="M671.606,251.675c-25.6,88.611-113.276,143.49-113.276,143.49s-46.176-88.788-20.578-177.4S651.027,74.276,651.027,74.276,697.2,163.064,671.606,251.675Z" transform="translate(-300.806 -43.885)" fill="#3f3d56"/>' +
'<path id="Path_339" data-name="Path 339" d="M389.455,251.675c25.6,88.611,113.276,143.49,113.276,143.49s46.176-88.788,20.578-177.4S410.033,74.276,410.033,74.276,363.857,163.064,389.455,251.675Z" transform="translate(-251.525 -43.885)" fill="#fbad6b"/>' +
'<path id="Path_340" data-name="Path 340" d="M362.266,285.94c70.241,64.031,78.82,162.461,78.82,162.461s-105.3-5.384-175.544-69.415-78.821-162.462-78.821-162.462S292.025,221.909,362.266,285.94Z" transform="translate(-186.721 -97.193)" fill="#3f3d56"/>' +
'<path id="Path_341" data-name="Path 341" d="M646.509,285.94C576.268,349.971,567.688,448.4,567.688,448.4s105.3-5.384,175.545-69.415,78.82-162.462,78.82-162.462S716.749,221.909,646.509,285.94Z" transform="translate(-313.324 -97.193)" fill="#3f3d56"/>' +
'<ellipse id="Ellipse_447" data-name="Ellipse 447" cx="32.353" cy="30.297" rx="32.353" ry="30.297" transform="translate(221.963 0)" fill="#fbad6b"/>' +
'<path id="Path_342" data-name="Path 342" d="M277.111,407.875c2.294,7.8,10.264,12.537,10.264,12.537s4.251-7.9,1.957-15.691-10.264-12.537-10.264-12.537S274.817,400.08,277.111,407.875Z" transform="translate(-216.534 -163.022)" fill="#fbad6b"/>' +
'<path id="Path_343" data-name="Path 343" d="M341.362,479.322c-2.469,7.748,1.6,15.726,1.6,15.726s8.075-4.584,10.544-12.332-1.6-15.726-1.6-15.726S343.832,471.574,341.362,479.322Z" transform="translate(-237.847 -191.056)" fill="#fbad6b"/>' +
'<path id="Path_344" data-name="Path 344" d="M802.4,562.676c-6.061,5.759-6.459,14.594-6.459,14.594s9.427-.5,15.488-6.262,6.459-14.594,6.459-14.594S808.464,556.916,802.4,562.676Z" transform="translate(-389.178 -224.567)" fill="#fbad6b"/>' +
'<path id="Path_363" data-name="Path 363" d="M227.111,527.876c2.294,7.8,10.264,12.537,10.264,12.537s4.251-7.9,1.957-15.691-10.264-12.537-10.264-12.537S224.817,520.081,227.111,527.876Z" transform="translate(-199.918 -207.992)" fill="#fbad6b"/>' +
'</g>' +
'</svg>'
}
]
},
{
id: 3,
text: "Background",
icon: '<i class="far fa-file-image fa-2x"></i>',
}
],
}
},
computed: {
},
methods: {
backHome() {
this.$router.push('/');
},
activated(id) {
this.drawers.find(drawer => drawer.id === id)
this.selected = id;
this.active = !this.active;
},
startDrag (evt, item) {
evt.dataTransfer.dropEffect = 'copy'
evt.dataTransfer.effectAllowed = 'copy'
evt.dataTransfer.setData('text/html', item.svg)
console.log(item)
},
onDrop (evt) {
var data = evt.dataTransfer.getData('text/html')
evt.target.textContent = data;
evt.preventDefault();
console.log(data)
// const itemID = evt.dataTransfer.getData('itemID')
// const drawer = this.drawers.find(drawer => drawer.id)
// const item = drawer.items.find(item => item.id == itemID)
// var data = evt.dataTransfer.getData("itemID");
// evt.target.appendChild(document.getElementById(data));
}
},
}
</script>
解决你的问题。第一件事应该是考虑使用 Vue 方式来归档你的目标。
一开始，当拖动开始时，我们可以捕获 item id 而不是将整个 svg 复制到 dom 事件。
<span
class="center"
v-html="item.svg"
draggable="true"
@dragstart="startDrag(item.id)" // passing item id instead of whole svg
>{{ item.name }}</span
>
data() {
...
selectedItemId: -1, // state for storing selected item id
...
}
methods: {
...
startDrag(itemId) {
this.selectedItemId = itemId; // set state to be the selected item id
},
...
}
放置时，我们可以使用 item id 在 drawers -> items
onDrop() {
// find the SVG in drawers -> items
const selectedItem = this.drawers[0].items.find(
(item) => item.id === this.selectedItemId
);
// append the svg to workspace if item is found
if (selectedItem) {
this.workspace += selectedItem.svg;
}
}
要显示 svg，这有点棘手，因为我不知道你想如何操作 canvas 区域。 例如
- 只显示 1 个 SVG 或
- 显示大量 SVG 或
- SVG 可以在 canvas 等周围移动
为了演示它，我使用了 v-html 标签 不安全 并清理了
<div class="space col-8">
<div
id="drop_zone"
@dragover.prevent
@dragleave.prevent
@drop="onDrop"
class="workspace"
>
<span v-html="workspace"></span>
</div>
</div>
这里是演示用的codesandbox，我没有你的CSS，样式有点不对，但还是可以用的：
https://codesandbox.io/s/dazzling-sea-gh42u?file=/src/components/HelloWorld.vue
使用 vue-movable
https://codesandbox.io/s/festive-lamport-p57yg?file=/src/components/HelloWorld.vue
成品图：https://i.imgur.com/u0xgf05.png
<div
id="drop_zone"
@dragover.prevent
@dragleave.prevent
@drop="onDrop"
ref="dropZone"
>
<Moveable
class="moveable"
@drag="handleDrag"
@scale="handleScale"
@rotate="handleRotate"
@warp="handleWarp"
v-bind="moveable"
v-for="(wp, index) of workspace"
:key="index"
>
<img :src="wp.svg" />
</Moveable>
</div>
data: {
...
workspace: [],
...
}
onDrop() {
const selectedItem = this.drawers[0].items.find(
(item) => item.id === this.selectedItemId
);
if (selectedItem) {
this.workspace.push(selectedItem);
}
},
handleDrag({ target, transform }) {
console.log("onDrag", transform);
target.style.transform = transform;
},
handleScale({ target, transform }) {
console.log("onScale", transform);
target.style.transform = transform;
},
handleRotate({ target, transform }) {
console.log("onRotate", transform);
target.style.transform = transform;
},
handleWarp({ target, transform }) {
console.log("onWarp", transform);
target.style.transform = transform;
},