Html5原生拖拽是什么和使用方法

这篇文章主要介绍“Html5原生拖拽是什么和使用方法”，在日常操作中，相信很多人在Html5原生拖拽是什么和使用方法问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”Html5原生拖拽是什么和使用方法”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

创新互联-专业网站定制、快速模板网站建设、高性价比大悟网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式大悟网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖大悟地区。费用合理售后完善，10余年实体公司更值得信赖。

拖拽实现

Html5原生拖拽是什么和使用方法

主要用到的是H5自带的拖拽效果。其实项目前端部分是使用React编写的，也是在使用H5实现了之后才了解到Dan Abramov大佬有个React-DnD组件对原生拖拽方法进行了封装。稍微学习了一下，很强。后续有使用到再写篇文章进行分享。

相关事件定义与用法

涉及一个属性六个事件。事件均为H5原生事件。

属性

draggable：正常div是不允许进行拖动的。需要添加属性draggable="true"将元素设置为可拖动。

事件

ondragstart：拖拽元素事件。在被拖拽时被调用。
ondrag：拖拽元素事件。在元素正在被拖拽时调用。
ondragend：拖拽元素事件。在拖拽元素放置时调用。
ondragenter：放置元素事件。在拖拽元素进入到放置元素有效区域时调用。
ondragover：放置元素事件。在拖拽元素覆盖放置元素有效区域时调用
ondragleave：放置元素事件。在拖拽元素离开放置元素有效区域时调用。
ondrop：放置元素事件。在拖拽元素被放置在放置元素中调用。

基础代码实现

拖拽元素相关事件实现代码如下。

function handleOndragstart() {
    /*
    该事件为拖拽元素被拖拽时调用。一般用于获取该拖拽元素的唯一标识，如id等。以方便后续数据更新时进行元素定位
     */
}

function handleOndragend() {
    /*
    该事件在拖拽元素被放置时调用。一般用于重置变量操作
     */
}

function handleOndrag() {
    /*
    该事件凭个人需求进行功能实现
     */
}

拖拽元素H5代码如下


    该元素为拖拽元素

放置元素相关事件实现代码如下

/*
默认情况下，数据/元素不能放置到其他元素中。 如果要实现该功能，我们需要防止元素的默认处理方法。我们可以通过调用 event.preventDefault() 方法来实现 ondragover 事件。
 */
function handleOndragover(event) {
    event.preventDefault();
    /*
    在这里进行你的函数处理
     */
}

function handleOndragenter(event) {
    event.preventDefault();
    /*
    在这里进行你的函数处理
     */
}

function handleOndragleave(event) {
    event.preventDefault();
    /*
    在这里进行你的函数处理
     */
}

function handleOndrop(event) {
    event.preventDefault();  // 清除默认事件。drop 事件的默认行为是以链接形式打开
    /*
    一般在该事件中，也就是拖拽元素被放下的时候与后端进行交互进行数据更新
     */
}

放置元素H5代码如下


    该元素为放置元素

拖拽实现 .parent { display: flex; width: 450px; justify-content: space-around; } .container { height: 300px; width: 200px; background-color: rgba(255, 255, 0, 0.3); display: flex; flex-direction: column; justify-content: center; align-items: center; } .box { width: 100px; height: 50px; background-color: rgba(255, 255, 255, 1); } function handleOndragstart(event) { // 设置被拖动的数据，可简单理解为设置Box的值为被拖动元素的id。此处为"Box" event.dataTransfer.setData("Box", event.target.id); } function handleOndragover(event) { event.preventDefault(); } function handleOndrop(event) { // 拖拽元素被放下时调用 event.preventDefault(); var data = event.dataTransfer.getData("Box"); // 将拖拽元素追加到改放置元素中 event.target.appendChild(document.getElementById(data)); }

大橙子网站建设，新征程启航

Html5原生拖拽是什么和使用方法

其他资讯