拖拽属性 draggable

2023-12-18 01:12
文章标签 属性 拖拽 draggable

本文主要是介绍拖拽属性 draggable,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

H5 新增的属性 draggable,它能够给与一切的 html 元素拖动的效果。

拖拽元素

属性为 draggable="true" 的元素,可拖动,且拖动时鼠标变为禁用图标

ps: 直接写 draggable 可能无效

ondragstart

开始拖拽时触发(按下鼠标并移动的瞬间触发)

ondrag

发生在 ondragstart 之后,只要开始拖动,鼠标未放开就会一直触发

ondragend

拖动结束时触发(拖拽后,松开鼠标的瞬间触发)

拖入元素

ondragenter

任何拖拽元素进入拖入元素时触发(鼠标触碰到拖入元素的边界时触发,此时还未松开鼠标)

ondragover

只要拖拽元素在拖入元素中移动就会一直触发。

ps: 正常情况下元素拖拽时 cursor 都是禁用图标,若想进入拖入元素时显示“加入”图标,需在 ondragover 事件里加上  e.preventDefault();  阻止默认行为。

ondragleave

拖拽元素离开拖入元素的瞬间触发(一定得先进入再离开 )

drop

拖拽元素被放置到拖入元素中时触发(拖到拖入元素中后,松开鼠标的瞬间触发)

Vue3 代码示例

<template><div><divclass="divA"id="divA"draggable="true"@dragstart="handleDragstart"@drag="handleDrag"@dragend="handleDragend">A--拖拽元素</div><divclass="divB"@dragover="handleDragover"@dragenter="handleDragenter"@dragleave="handleDragleave"@drop="handleDrop">B--拖入元素</div></div>
</template><script setup>
function handleDragover(e) {e.preventDefault();console.log('handleDragover');
}function handleDragenter(e) {console.log('handleDragenter');
}function handleDragstart(e) {e.dataTransfer.setData('text/plain', event.target.id);console.log('handleDragstart');
}function handleDrag(e) {console.log('handleDrag');
}function handleDragend(e) {console.log('handleDragend');
}function handleDragleave(e) {console.log('handleDragleave');
}function handleDrop(e) {console.log('handleDrop', e);const id = e.dataTransfer.getData('text/plain');const draggableElement = document.getElementById(id);e.target.appendChild(draggableElement);
}
</script><style scoped>
.divA {background: yellow;height: 100px;width: 100px;
}
.divB {margin-top: 20px;background: rgb(105, 108, 243);height: 200px;width: 200px;
}
</style>

这篇关于拖拽属性 draggable的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/506507

相关文章

前端原生js实现拖拽排课效果实例

《前端原生js实现拖拽排课效果实例》:本文主要介绍如何实现一个简单的课程表拖拽功能,通过HTML、CSS和JavaScript的配合,我们实现了课程项的拖拽、放置和显示功能,文中通过实例代码介绍的... 目录1. 效果展示2. 效果分析2.1 关键点2.2 实现方法3. 代码实现3.1 html部分3.2

在Java中使用ModelMapper简化Shapefile属性转JavaBean实战过程

《在Java中使用ModelMapper简化Shapefile属性转JavaBean实战过程》本文介绍了在Java中使用ModelMapper库简化Shapefile属性转JavaBean的过程,对比... 目录前言一、原始的处理办法1、使用Set方法来转换2、使用构造方法转换二、基于ModelMapper

JavaScript中的isTrusted属性及其应用场景详解

《JavaScript中的isTrusted属性及其应用场景详解》在现代Web开发中,JavaScript是构建交互式应用的核心语言,随着前端技术的不断发展,开发者需要处理越来越多的复杂场景,例如事件... 目录引言一、问题背景二、isTrusted 属性的来源与作用1. isTrusted 的定义2. 为

Java如何通过反射机制获取数据类对象的属性及方法

《Java如何通过反射机制获取数据类对象的属性及方法》文章介绍了如何使用Java反射机制获取类对象的所有属性及其对应的get、set方法,以及如何通过反射机制实现类对象的实例化,感兴趣的朋友跟随小编一... 目录一、通过反射机制获取类对象的所有属性以及相应的get、set方法1.遍历类对象的所有属性2.获取

vue如何监听对象或者数组某个属性的变化详解

《vue如何监听对象或者数组某个属性的变化详解》这篇文章主要给大家介绍了关于vue如何监听对象或者数组某个属性的变化,在Vue.js中可以通过watch监听属性变化并动态修改其他属性的值,watch通... 目录前言用watch监听深度监听使用计算属性watch和计算属性的区别在vue 3中使用watchE

滚雪球学Java(87):Java事务处理:JDBC的ACID属性与实战技巧!真有两下子!

咦咦咦,各位小可爱,我是你们的好伙伴——bug菌,今天又来给大家普及Java SE啦,别躲起来啊,听我讲干货还不快点赞,赞多了我就有动力讲得更嗨啦!所以呀,养成先点赞后阅读的好习惯,别被干货淹没了哦~ 🏆本文收录于「滚雪球学Java」专栏,专业攻坚指数级提升,助你一臂之力,带你早日登顶🚀,欢迎大家关注&&收藏!持续更新中,up!up!up!! 环境说明:Windows 10

HTML5自定义属性对象Dataset

原文转自HTML5自定义属性对象Dataset简介 一、html5 自定义属性介绍 之前翻译的“你必须知道的28个HTML5特征、窍门和技术”一文中对于HTML5中自定义合法属性data-已经做过些介绍,就是在HTML5中我们可以使用data-前缀设置我们需要的自定义属性,来进行一些数据的存放,例如我们要在一个文字按钮上存放相对应的id: <a href="javascript:" d

Python中的属性装饰器:解锁更优雅的编程之道

引言 在Python的世界里,装饰器是一个强大的工具,它允许我们以一种非侵入性的方式修改函数或方法的行为。而当我们谈论“属性装饰器”时,则是在探讨如何使用装饰器来增强类中属性的功能。这不仅让我们的代码更加简洁、易读,同时也提供了强大的功能扩展能力。本文将带你深入了解属性装饰器的核心概念,并通过一系列实例展示其在不同场景下的应用,从基础到进阶,再到实际项目的实战经验分享,帮助你解锁Python编程

react笔记 8-17 属性绑定 class绑定 引入图片 循环遍历

1、绑定属性 constructor(){super()this.state={name:"张三",title:'我是一个title'}}render() {return (<div><div>aaaaaaa{this.state.name}<div title={this.state.title}>我是一个title</div></div></div>)} 绑定属性直接使用花括号{}   注

ConstraintLayout布局里的一个属性app:layout_constraintDimensionRatio

ConstraintLayout 这是一个约束布局,可以尽可能的减少布局的嵌套。有一个属性特别好用,可以用来动态限制宽或者高app:layout_constraintDimensionRatio 关于app:layout_constraintDimensionRatio参数 app:layout_constraintDimensionRatio=“h,1:1” 表示高度height是动态变化