h5页面拖拽选择数字到指定位置_H5 拖拽,一个函数搞定,直接指定对象设置可拖拽...

今天药忘吃喽~ 2023-01-01 04:57 286阅读 0赞

页面上，弹个小窗体，想让它可以拖拽，又不想 加载一堆js，就简单的能让他可以拖动？ 嗯，下面有这样一个函数,调用下就好了！

1. 先来说说 H5的 拖拽

在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。

设置元素为可拖放

首先，为了使元素可拖动，把 draggable 属性设置为 true ：

拖动开始 - ondragstart 和 setData()

当元素被拖动时，要发生什么。

如，ondragstart 属性调用了一个函数，drag(event)，它规定了被拖动的数据。

dataTransfer.setData() 方法设置被拖数据的数据类型和值：

functiondrag(ev)

ev.dataTransfer.setData("Text",ev.target.id);

在这个例子中，数据类型是 "Text"，值是被拖动元素的 id 。

拖动正在进行 - ondrag

此事件为元素正在被拖动的过程中触发的，不断触发。

拖动完成 - ondragend

此时用户松开鼠标，拖动结束了，该干嘛干嘛去。

当然，要不要吧哪个元素的位置移动下？

被拖动的元素进来了 - ondragenter

被鼠标拖动的对象进入其容器范围内了。是不是要准备 接收这个拖来的元素，安排个位置?

放到何处 - ondragover

ondragover 事件规定在何处放置被拖动的元素。此时还没有真正的完成拖动，被拖动元素可能还在、还会继续被拖动。准备的位置预热，来吧。

默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。

这要通过调用 ondragover 事件的 event.preventDefault() 方法：

event.preventDefault()

被拖动的元素离开了 - ondragleave

被鼠标拖动的对象离开其容器范围内了。煮熟的鸭子飞走了，准备的位置要撤销。(白准备了。)

进行放置 - ondrop 和 getData

当放置被拖元素时，会发生 drop 事件。这时才是真正的结束了拖放，蹲坑咯。(其他经过的元素(ondragenter  、ondragover 、ondragleave)不高兴了：“忽悠我们是把。”)

在上面的例子中，ondrop 属性调用了一个函数，drop(event)：

functiondrop(ev)

ev.preventDefault();var data=ev.dataTransfer.getData("Text");

ev.target.appendChild(document.getElementById(data));

代码解释：

调用 preventDefault() 来避免浏览器对数据的默认处理(drop 事件的默认行为是以链接形式打开)

通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。

被拖数据是被拖元素的 id ("drag1")

把被拖元素追加到放置元素(目标元素)中

简述函数:

被拖拽元素上触发的事件：

1.ondragstart - 用户开始拖动元素时触发

2.ondrag - 元素正在拖动时触发

3.ondragend - 用户完成元素拖动后触发

目标元素上触发的事件：

1.ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件

2.ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件

3.ondragleave - 当被鼠标拖动的对象离开其容器范围内时触发此事件

4.ondrop - 在一个拖动过程中，释放鼠标键时触发此事件

另外，需要的知识点就是event对象中的preventDefault()。在ondragover中一定要执行preventDefault()，否则ondrop事件不会被触发。

不过，保存在dataTransfer对象中的数据只能在ondrop事件处理程序中读取。

另外，如果是从其他应用软件或是文件中拖东西进来，尤其是图片的时候，默认的动作是显示这个图片或是相关信息，并不是真的执行drop。

此时需要用用document的ondragover事件把它直接干掉。

2. 干货,一个函数解决问题

functionsetDragable(drg,mov)\{

let drgObj=drg;

let moveObj=mov||drg;function G(o)\{returndocument.querySelector(o)\}//获取元素的纵坐标,距离文档顶部的高度

functiongetTop(e) \{var offset =e.offsetTop;if (e.offsetParent != null) offset +=getTop(e.offsetParent);returnoffset;

\}//获取元素的横坐标,距离文档左边的宽度

functiongetLeft(e) \{var offset =e.offsetLeft;if (e.offsetParent != null) offset +=getLeft(e.offsetParent);returnoffset;

\}//拖放开始

functiondragstart(e)\{

let off=\{x:e.x-getLeft(moveObj),y:e.y-getTop(moveObj)\};

moveObj.dragOff=off;

\}//拖放结束

functiondragend(e)\{

let off=moveObj.dragOff;

moveObj.style.top=e.y-off.y+"px";

moveObj.style.left=e.x-off.x+"px";

\}if(typeof drg !="object")

drgObj=G(drg);if(typeof mov != "object")

moveObj=G(mov||drg);

drgObj.draggable= true;

drgObj.style.cursor= "move";

moveObj.style.position= "absolute";//监听拖动事件

drgObj.addEventListener("dragstart",dragstart,true);

drgObj.addEventListener("dragend",dragend,true);

怎么用?

setDragable(要拖动的对象);

setDragable(允许拖动的对象, 拖动要移动的对象);

setDragable(标题栏, 窗体);

搞定。 访问Github，get更多技能:https://github.com/lzpong/H5\_JS\_Tools。

now, you can try it with copy&paste...

现在，你可以试试，复制粘贴，运行。

以上就是H5 拖拽,一个函数搞定,直接指定对象设置可拖拽的全部内容。

h5页面拖拽选择数字到指定位置_H5 拖拽,一个函数搞定,直接指定对象设置可拖拽...

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 H5--drag拖拽事件

相关 element 弹窗位置拖拽；拖拽宽高

相关 h5页面拖拽选择数字到指定位置_H5 拖拽,一个函数搞定,直接指定对象设置可拖拽...

相关 HTML5拖拽效果

相关拖拽

相关 HTML5——drag拖拽

相关 H5拖拽

相关 H5 drag拖拽移动小结及示例

相关 H5新增API （拖拽、文件）

相关 JavaSwing_5.5: 拖拽功能