在html5中原生拖拽事件和基础实现方法的示例分析
导读:本文共2755字符,通常情况下阅读需要9分钟。同时您也可以点击右侧朗读,来听本文内容。按键盘←(左) →(右) 方向键可以翻页。
摘要: 拖拽实现主要用到的是H5自带的拖拽效果。其实项目前端部分是使用React编写的,也是在使用H5实现了之后才了解到Dan Abramov大佬有个React-DnD组件对原生拖拽方法进行了封装。稍微学习了一下,很强。后续有使用到再写篇文章进行分享。相关事件定义与用法涉及一个属性六个事件。事件均为H5原生事件。属性draggable:正常div是不允许进行拖动的。需要... ...
目录
(为您整理了一些要点),点击可以直达。拖拽实现
主要用到的是H5自带的拖拽效果。其实项目前端部分是使用React编写的,也是在使用H5实现了之后才了解到Dan Abramov大佬有个React-DnD组件对原生拖拽方法进行了封装。稍微学习了一下,很强。后续有使用到再写篇文章进行分享。
相关事件定义与用法
涉及一个属性六个事件。事件均为H5原生事件。
属性
draggable:正常div是不允许进行拖动的。需要添加属性draggable="true"将元素设置为可拖动。
事件
ondragstart:拖拽元素事件。在被拖拽时被调用。
ondrag:拖拽元素事件。在元素正在被拖拽时调用。
ondragend:拖拽元素事件。在拖拽元素放置时调用。
ondragenter:放置元素事件。在拖拽元素进入到放置元素有效区域时调用。
ondragover:放置元素事件。在拖拽元素覆盖放置元素有效区域时调用
ondragleave:放置元素事件。在拖拽元素离开放置元素有效区域时调用。
ondrop:放置元素事件。在拖拽元素被放置在放置元素中调用。
基础代码实现
拖拽元素相关事件实现代码如下。
拖拽元素H5代码如下:
放置元素相关事件实现代码如下:
放置元素H5代码如下
实例
以下代码可实现在两个div之间进行子元素的拖拽:
在html5中原生拖拽事件和基础实现方法的示例分析的详细内容,希望对您有所帮助,信息来源于网络。