介绍 <李> <李> function handleOndragstart (), {
,,/*
,,,该事件为拖拽元素被拖拽时调用。一般用于获取该拖拽元素的唯一标识,如id等。以方便后续数据更新时进行元素定位
,,,*/}
function handleOndragend (), {
,,/*
,,,该事件在拖拽元素被放置时调用。一般用于重置变量操作
,,,*/}
function handleOndrag (), {
,,/*
,,,该事件凭个人需求进行功能实现
,,,*/} & lt; div
,,,,可拖动的=皌rue",
,,,,ondragstart=癶andleOndragstart ()“,
,,,,ondrag=癶andleOndarg ()“,
,,,,ondragend=癶andleOndragend ()“;
,,,,在
,,,该元素为拖拽元素
& lt;/div> /*
默认情况下,数据/元素不能放置到其他元素中只如果要实现该功能,我们需要防止元素的默认处理方法。我们可以通过调用,event.preventDefault(),方法来实现,ondragover 事件。
,*/function handleOndragover(事件),{
,,,event.preventDefault ();
,,/*
,,,在这里进行你的函数处理
,,,*/}
function handleOndragenter(事件),{
,,,event.preventDefault ();
,,/*
,,,在这里进行你的函数处理
,,,*/}
function handleOndragleave(事件),{
,,,event.preventDefault ();
,,/*
,,,在这里进行你的函数处理
,,,*/}
function handleOndrop(事件),{
,,,event.preventDefault();,,//,清除默认事件.drop 事件的默认行为是以链接形式打开
,,/*
,,,一般在该事件中,也就是拖拽元素被放下的时候与后端进行交互进行数据更新
,,,*/} & lt; div
,,,,ondragenter=癶andleOndragenter(事件),,
,,,,ondragover=癶andleOndragover(事件),,
,,,,ondragleave=癶andleOndragleave(事件),,
,,,,ondrop=" handleOndrop(事件)
,,,,在
,,,该元素为放置元素
& lt;/div> & lt; ! DOCTYPE html>
& lt; html lang=皕h-CN"祝辞
& lt;才能head>
,,,& lt; meta charset=癠TF-8",/比;
,,,& lt; meta name=皏iewport",内容=翱矶?设备宽度,初始=1.0“,/比;
,,,& lt; title>拖拽实现& lt;/title>
,,,& lt; style 类型=拔谋?css"比;
,,,,,.parent {
,,,,,,,显示:,flex;
,,,,,,,宽度:,450 px;
,,,,,,,justify-content:,空间;
,,,,,}
,,,,,.container {
,,,,,,,身高:,300 px;
,,,,,,,宽度:,200 px;
,,,,,,,背景颜色:,rgba (255,, 255,, 0, 0.3);
,,,,,,,显示:,flex;
,,,,,,,flex-direction:,列;
,,,,,,,justify-content:,中心;
,,,,,,,对齐项目:,中心;
,,,,,}
,,,,,.box {
,,,,,,,宽度:,100 px;
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
这篇文章主要介绍”Html5原生拖拽是什么和使用方法”,在日常操作中,相信很多人在Html5原生拖拽是什么和使用方法问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答“Html5原生拖拽是什么和使用方法”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!
<>强拖拽实现
主要用到的是H5自带的拖拽效果。其实项目前端部分是使用反应编写的,也是在使用H5实现了之后才了解到丹?阿布拉莫夫大佬有个React-DnD组件对原生拖拽方法进行了封装。稍微学习了一下,很强。后续有使用到再写篇文章进行分享。
<强>相关事件定义与用法
涉及一个属性六个事件。事件均为H5原生事件。
属性
可拖动的:正常div是不允许进行拖动的。需要添加属性可拖动的=皌rue"将元素设置为可拖动。
,
事件
ondragstart:拖拽元素事件。在被拖拽时被调用。
<李>ondrag:拖拽元素事件。在元素正在被拖拽时调用。
<李>ondragend:拖拽元素事件。在拖拽元素放置时调用。
<李>ondragenter:放置元素事件。在拖拽元素进入到放置元素有效区域时调用。
<李>ondragover:放置元素事件。在拖拽元素覆盖放置元素有效区域时调用
<李>ondragleave:放置元素事件。在拖拽元素离开放置元素有效区域时调用。
<李> ondrop:放置元素事件。在拖拽元素被放置在放置元素中调用。
,
<>强基础代码实现
拖拽元素相关事件实现代码如下。
拖拽元素H5代码如下
放置元素相关事件实现代码如下
放置元素H5代码如下
<强>实例
以下代码可实现在两个div之间进行子元素的拖拽
