js拖拽div,html实现拖拽效果
1. HTML5 拖拽
1.1 相关知识
拖动元素：您可以将draggable=true 添加到元素中以使其能够被拖动。
被拖动元素的事件监视：(应用于被拖动元素)
当拖动开始时，Ondragstart调用ondragleave，当鼠标离开拖动元素时调用ondragend，当拖动结束时调用ondrag。整个拖动过程都会调用目标元素：将元素A拖动到元素B中，然后元素B就是目标元素。页面中的任何元素都可以是目标元素。
目标元素的事件监控：(应用于目标元素)
当拖动元素进入时，Ondragenter调用ondragover。当拖动元素停留在目标元素上时，会持续触发(无论拖动元素是否在移动)。当鼠标在目标元素上释放时，调用ondragleave。如果希望拖动元素在目标元素中执行某些操作，必须在ondragover()中添加代码行event.preventDefault()。
1.2 拖拽基础
!DOCTYPE html html lang= en head meta charset= UTF-8 /meta name= viewport content= width=设备宽度，初始比例=1.0 /标题文档/标题样式. box {宽度：200 px高度：200像素背景：绿色；} .box2 {位置：相对；左：300像素顶配：50px宽度：300像素高度：300像素背景：红色；}/style/head body div class= box draggable= true /div div class= box 2 /div script//html 5拖拽//应用于拖拽元素var box=document.querySelector( .盒子)盒子。ondragstart=function(){ console。日志(拖拽开始)}框。ondragleave=function(){ console。日志(鼠标离开元素)}框。ondragend=function(){ console。日志(拖拽结束)}//box。ondrag=function(){//控制台。日志(在拖拽);//} //应用于目标元素（想把包厢拖拽进去的地方)var box 2=文档。查询选择器(。方框2’)方框2。ondragenter=function(){ console。日志(进来了)}方框2。ondragleave=function(){ console。日志(离开了) } //当拖拽元素在目标元素上时，连续触发box2.ondragover=函数(e) { //如果想让拖拽元素在目标元素里做点事情，就必须要在翁德拉戈弗里加事件。预防默认()这一行代码。
e。防止默认()控制台。log( over )}框2。ondrop=function(){ console。日志(松开鼠标了)} /script /body/html
1.3 将 A 在 B、C 之间拖拽
！DOCTYPE html html lang= en head meta charset= UTF-8 /meta name= viewport content= width=设备宽度，初始比例=1.0 /标题文档/标题样式方框b {宽度：250像素高度：250像素背景：绿色；} .cell-a { float:left；宽度：50px高度：50px保证金：5px文本对齐：居中；行高：50px边界半径：50%;背景：红色；} .方框-c {宽度：200像素高度：200像素页边距-顶部：10px背景：天蓝色；}/style/head body pbox b/p div class= box-b div class= true 1/div div class= cell-a draggable= true 2/div div class= cell-a draggable= true 3/div div class= cell-a 4/div div class= cell-a draggable= true 5/div/div pbox c/p div class= box-c /div script var cellA=cell-a )var boxB=var查询选择器(.box-b’)var boxC=document。查询选择器(.box-c)var temp=null cella。foreach((单元格，索引)={ //从方框b拖拽到boxC细胞。ondragstart=function(){//保持当前拖拽的元素temp=this }单元格。ondragend=function(){ temp=null } boxc。ondragover=function(e){ e . prevent default()} boxc。ondragenter=function(){ this。appendchild(temp)}//从boxC拖拽到盒子b盒子b。ondragover=function(e){ e . prevent default()} boxB。ondragenter=function(){ this。追加子(临时)} })/script/body/html效果展示
2. 用 js 实现拖拽
2.1 js 简单拖拽
按下鼠标进行简单的拖拽。
！DOCTYPE html html lang= en head meta charset= UTF-8 /meta name= viewport content= width=设备宽度，initial-scale=1.0 /title document/title style # box { position:absolute；宽度：200像素高度：200像素背景：绿色；}/样式脚本窗户。onload=function(){ var box=document。getelementbyid( box )var disX=0 var disY=0 box。onmousedown=function(e){ var e=e window。event disX=e . clientx-this。offsetleft disY=e . clienty-this。机顶盒。onmousemove=function(e){ var e=e window。事件框。风格。left=e . clientx px 框。style=e效果展示
2.2 带效果的拖拽
!DOCTYPE html html lang= en head meta charset= UTF-8 /meta name= viewport content= width=设备宽度，初始比例=1.0 /标题文档/标题样式。框{位置：绝对；宽度：200像素高度：200像素背景：天蓝色；} .box1 {位置：绝对；边框：1px虚线黑色；不透明度：0.5;} .通道盒{位置：绝对；底部：30px右：30px/*无法选中*/-moz-用户选择：无；/* 火狐*/-WebKit-用户选择：无；/* 谷歌*/-毫秒用户选择：无；/* IE */用户选择：无；}/样式脚本窗口。onload=function(){；(函数(){ var box=document。查询选择器(.box’)var disX，disY，temp var body=document。查询选择器(“主体”)变量方式1=文档。查询选择器(“方式1”)变量方式2=文档。查询选择器(“方式2”)框。onmousedown=function(e){ var e=e window。事件//兼容性写法disX=e . clientx-this。偏左disY=e . clienty-this。offsettop temp=文档。createelement(“div”)正文。追加子(临时)临时。班级名单。添加( box )温度。班级名单。添加(框1 )//移动后位置会变，温度的位置应该与包厢位置重合在…之时风格。left=e . clientx-disX px //记得加单位！在…之时风格。top=e . clienty-disY px temponmousemove=function(e){ var e=e window。事件温度。风格。left=e . clientx-disX px //记得加单位！在…之时风格。top=e . clienty-disY px } temponmouseup=函数(e){ console。记录( end )这个。onmousemove=null//1则默认不发生实际移动如果(方式2。勾选){框。风格。left=e . clientx-disX px 框。风格。top=e . clienty-disY px } temp风格。display= none 这个。onmouseup=null } } })()}/script/head body div class= box /div div class= way-box p请选择拖拽的方式/p input type= radio id= way 1 name= way checked/label for= way 1 1/label input type= radio id= way 2 name= way /label for= way 2 2/label/div/body/html效果展示
有时会卡顿，未解决…
到此这篇关于html5拖拽及用射流研究…实现拖拽的文章就介绍到这了，更多相关html5拖拽内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。