js drag drop,drag&drop
简介
拖放是一个非常常见和常用的操作，就是抓取一个对象后，把它放到你想放的地方。在H5，拖放是一个标准操作，任何元素都可以拖放！但是！要实现拖动，需要添加拖动属性。
H5拖动属性：拖动：自动真假
注意：默认情况下，链接和图片是可拖动的，因此不需要draggable属性。
-拖动(拖动目标时触发事件)
当元素开始拖动时，这个事件被触发。拖动-当元素被拖动时，这个事件被触发。拖动结束-该事件在元素被拖动后触发。Drop(目标区域被释放时触发该事件)
drag enter-当被拖动元素进入目标区域时触发此事件，dragover-当被拖动元素离开目标区域时触发此事件-当被拖动元素离开目标区域时触发此事件，drop-当被拖动元素放入目标区域时触发此事件
拖拽步骤
将元素属性draggable设置为true。
main class= main Div class= left id= left Div class= txt-show left area/Div Div class= dargable txt id= txt 1 draggable= true 可移动文本one/Div class= dargable txt id= txt 2 draggable= true 可移动文本2/Div class= dargable txt id= txt 3 draggable= true 可移动文本3/Div class= dargable txt id= txt 4 draggable= true 可移动文本四个/Div Div class= dargable txt id= txt 5 draggable= true 可移动文本五个/Div/Div class= right id= right Div class= txt-show 右区域/div /div /main拖动
Dragstart事件：在拖放操作过程中，通过dataTransfer存储和获取数据。每个事件对象都有一个DataTransfer对象来保存拖动的数据。它可以保存一个或多个数据和一个或多个数据类型。
let left=document . getelementbyid( left )let target=document . getelementbyid( right )left . addevent listener( dragstart ，(event)={ const target=event . target；//在项目拖动的开始事件(ondragstart)时，可以设置data transfer(setData)。//拖放，dataTransfer属性，等于transporter。//以后再拿。//拖动项目结束，可以得到data transfer . get data . event . data transfer . setdata( text ，target.id)//JS事件中有冒泡机制console . log( drag starts drawing 1 )；})拖动事件：总是在拖动过程中执行。
Left.addeventlistener (drag ，(event)={ console . log( drag is dragging 2 )；})dragend事件：结束
Left.addEventListener (dragend ，(event)={ console . log( dragend drag超过7 )；})位置
Dragenter和dragleave事件：进入或离开目标区域。
目标。AddEventListener (dragenter ，(event)={console.log (dragenter进入区域3)}) Target。AddEventListener (dragleave ，(event)={console.log (dragleave离开拖动区域5) })dragover事件：默认情况下，无法设置如果需要设置允许的放置，应防止元素的默认行为。
target . addevent listener( dragover ，(event)={//阻止默认行为event . prevent default()；Console.log(dragover在该区域拖动了4 )})Drop事件：Drop
target.addEventListener(drop ，(event)={ console.log(drop释放鼠标啦6’)让drag _ id=event。数据传输。获取数据(“文本”)目标。appendchild(文档。getelementbyid(drag _ id))})
完整代码
！DOCTYPE html html lang= en head meta charset= UTF-8 meta name= viewport content= width=device-width，initial-scale=1.0 title文档/标题样式main { display:flex；justify-content:space-around；} .左{宽度：300 px高度：500像素边框：1px纯色亮绿色右边距：10px/*背景色：绿色；*/} .右{宽度：300像素高度：500像素边框：1px纯色亮绿色文本对齐：居中；填充：1px/*背景：红色；*/} .txt { border: 1px纯灰；边距：1px填充：5px光标：移动；}/style/head body main class= main div class= left id= left div class= txt-show 左边区域/div div class= dargable txt id= txt 1 draggable= true 可移动的文字一/div div class= dargable txt id= txt 2 draggable= true 可移动的文字二/div div class= dargable txt id= txt3 draggable= true 可移动的文字三/div div class=可拖动txt id= txt 4 draggable= true 可移动的文字四/div div class= dargable txt id= txt 5 draggable= true 可移动的文字五/div/div div class= right id= right div class= txt-show 右边区域/div /div /main脚本左=文档。 getelementbyid( left )let target=document。getelementbyid( right )left。addevent侦听器( dragstart ，(event)={ event。数据传输。setdata( Text ，target.id) console.log(drag开始拖动啦1);})目标。addevent侦听器( dragstart ，(event)={ const target=event。目标；事件。数据传输。setdata( Text ，目标。id)})左。addevent listener( drag ，(event)={ console.log(drag正在拖啦2);})左。addevent侦听器( dragend ，(event)={ console.log(dragend拖动结束啦7);})目标。addevent listener( drag enter ，(event)={ console.log(dragenter进入区域啦3 )})目标。addevent侦听器( dragover ，(event)={ event。防止默认()；console.log(dragover在区域内拖动啦4 )})左。addevent侦听器( dragover ，(event)={ event。防止默认()；})目标。addevent侦听器( drag leave ，(event)={ console.log(dragleave离开拖动区域啦5 )})目标。addevent侦听器( drop ，(event)={ let drag _ id=event。数据传输。获取数据(“文本”)目标。appendchild(文档。getelementbyid(drag _ id))})左。addevent侦听器( drop ，(event)={ let drag _ id=event。数据传输。获取左侧数据(“文本”)。appendchild(文档。getelementbyid(drag _ id))})/script/body/html
小记
拖动开始事件中通过数据传输来实现数据的存储和获取，每个事件事件对象中都会有数据传输对象用来保存被拖动的数据。在项目拖动的开始事件(ondragstart)的时候，可以对数据传输进行设值操作(setData). event . data transfer . setData()进行设值，在拖动结束后，可以通过event.dataTransfer.getData()获取数据传输对象里的值。
浏览器默认无法将数据/元素放置到其他元素中，如果需要设置允许放置，就要阻止元素的默认行为。通过事件。预防默认()阻止。
可以通过添加钢性铸铁样式进行对拖拽效果的改变。例：dragSrc.classList.add(ds )。使用优等生名单在元素中添加，移除及切换半铸钢钢性铸铁(铸造半钢)类，类别列表属性是只读的，但可以使用添加()和移除()方法修改它。
使用appendChild()方法移除元素到另外一个元素。
超文本标记语言拖放应用程序接口
数据传输()
HTML DOM appendChild()方法
HTML DOM addEventListener()方法
到此这篇关于HTML5拖动和滴具体使用详解的文章就介绍到这了，更多相关HTML5拖动和滴内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。