事情是这样的，右边有各种控件，可以拖动到右边的自由区，也可以在自由区随意拖动。

案例1:

我开始了，好容易！通过绑定元素的mousedown事件，监控鼠标的mousemove和mouseup事件，我可以很容易的实现同一个区域的元素可以拖动运行和编码！

Move (e) {let odiv=e.target //获取目标元素//算出鼠标相对于元素的位置，让disxx=e . client x-odiv . offsettlet dissy=e . client y-odiv . offsettopdocument . onmousemove=e={//鼠标按下并移动的事件//用鼠标的位置减去鼠标相对于元素的位置，获取元素的位置let left=e . client x-dissy top=e . client y-disy//移动当前onmouseup=e={document。onmousemove=nulldocument。onmouseup=null}}注意，应该为被拖动的对象区域设置position:relative，否则元素会自行抖动。

上面的代码不能满足需要，应该把左边的拖到右边，在右边区域随便拖。

案例2:

好了，首先我来做一个布局，左右布局，把事件绑定到元素，然后编码！

模板div style=' position : relative；'El-container El-average width=' 300 px ' ul Li class=' LiSTYLe ' v-for=' item in tags ' : key=' item . id ' img src=' http :/assets/timg . png ' class=' msg ' alt=' ' @ drag start=' drag start ' drag able=' true ' @ drag=' drag ing ' @ drag end=' drag end '/Li/ul/El-average！-自由移动区域-El-main div @ drop=' drop ' @ dragov . prevent style=' height :600 px；宽度width:800px/div！-SVG id=' SVG drag ' width=' 1200 ' height=' 1000 '/SVG-/El-main/El-container/div/template事件绑定方法：

drag start(ev){ console . log(' drag start drag start事件，绑定到被拖动的元素'，事件)ev.datatransfer.setdata ('text '，ev . target . id)this . offsetx=ev . offsetx this . offsety=ev . offsety console . log(this . offsetx '-. offsety)}，drag ing(e){//console . log(' drag ')var x=e . clientx var y=e.clienty//console.log(' shubiaocclient ')if(x 300){ console . log(this tags。如果(x===0y==0){ return//不处理x和y在拖动的最后时刻为0的情况} x-=this，则PageX和pageY都变为0。offsetx y-=这个。offsecty//console . log(' eleft ')//console . log(x '-' y)/*其父元素具有第一个定位的元素。如果有一个边距减去边距值*/e . target . style . left=x-5 ' px ' e . target . style . top=y-60 ' px ' }，Drop (ev) {console.log('drop拖放事件，bind可拖动区域'，事件)this . Text=ev . datatransfer . getdata(' Text ')console . log(this . Text)让target=document . getelementbyid(this . Text)ev . target . appendchild(target)ev . preventdefault()}，drate(target然而，正确的元素被拖走了，正确的元素不见了。然后我尝试了各种各样的东西，比如拖动开始时的clone元素，drap的时候的clone元素等等，都不是很完美。这时，我崩溃了.

最后，不知道灵感从何而来。这个困扰了我两秒钟的难题突然被我成功克服了。好了，我要开始吹牛了.

案例3:

我的想法是这样的(不想看？直接看代码，反正是给我自己的。):左侧列表元素可以拖动(draggable=' true ')，绑定dragstart (start事件)，不要绑定draging (drag事件)，这样左侧列表元素有drag属性，但位置不会改变。当向右拖动该区域时

第一次触发了滴操作后，新生成一个对象，这个对象既有拖动（可拖动="真")属性，也绑定dragstart(开始事件),拖动事件（拖动),这样新元素会在右侧随意拖动。那么怎么新生成一个元素呢？自然不是附录子之类的，利用某视频剪辑软件双向绑定的特性，

页面上循环数组元素，生成元素即往数组中推元素即可。每次拖动元素都会触发滴事件，并不是每次都要生成一个新元素，要知道是从左边列表拖到右侧第一次滴的时候生成新元素。怎么知道呢？这就是两个开始拖动的妙处

t模板div style='相对位置：'El-容器El-平均宽度=' 300 px ' ul Li class=' LiSTYLe ' v-for='标记中的项目' : key=' item。id ' img src=' http :/资产/timg。png ' class=' msg ' alt=' ' @ drag start=' drag start ' drag able=' true ' : id=' item。id ' @拖动结束=' IMGenD '/Li/ul/El-平均El-main div @ drop。防止=“拖放”@拖动。防止样式='高度：10000 px'width :1800 px ' img src=' http :/资产/timg。png ' class=' msg ' : style=' { left : item。x ' px '，第：项。y ' px ' } ' alt=' v-for='(item，$index)在InfoList ' : key=' $ index ' @拖动start=' imgStart '拖动able=' true ' @拖动=' drag($ event，item)' @拖动end=' imgEnd '/div/El-main/El-container/container判断是否是第一次进入拖拽区域，如果是第一次需要新生成对象，否则不需要*/if(信息。is drop){ var x=e . client x var y=e . client y x-=this。offsetx y-=这个。偏移信息。x=x-5信息。y=y-60信息。id=info。身份证日期。解析(新日期())这个.InfoList.push(info) } }，IMgstart(e){ let info={ is drop : false } e . data transfer。setdata(' Text '，JSON。stringify(info))这个。imgoffsetx=e . offsetx这个。imgoffsety=e . offsecty }，draging，item){ item。x=e . client x-这个。imgoffsetx-5项目。y=e . clienti-这个。imgoffsety-60 }，imgendset注意：拖动元素设置位置：绝对属性

总结

以上所述是小编给大家介绍的某视频剪辑软件中基于html5拖动织物的拖放效果案例分析，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！