h5原生拖拽
2024-10-19 16:39:53
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Title</title>
<style>
#drag-el {
width: 100px;
height: 100px;
background-color: greenyellow;
}
#drop-el {
width: 200px;
height: 200px;
background-color: antiquewhite;
}
</style>
</head>
<body>
<div id="drop-el"></div>
<div id="drag-el" draggable="true">
<!-- <img src="logo.png" alt=""> -->
被拖拽的元素
</div>
<script>
window.onload = function () { var dropEl = $('#drop-el');
var dragEl = $('#drag-el'); //设置关联数据
dragEl.addEventListener("dragstart", dragstartHandle); //禁止默认事件,使其可拖放,默认是不允许拖放的,除了图片和文字
dropEl.addEventListener("dragenter", preventDefault);
dropEl.addEventListener("dragover", preventDefault);
//鼠标释放,在拖放目标上接受数据并处理
dropEl.addEventListener("drop", dropHandle); function dropHandle(event) {
event.preventDefault();//在Firefox 3.5+中,放置事件的默认行为是打开被放到放置目标上的URL,因此需要取消drop事件的默认行为,阻止它打开URL
var data = event.dataTransfer.getData("Text");
event.target.appendChild($("#" + data));
console.log(event.target);
} function dragstartHandle(event) {
event.dataTransfer.setData("Text", event.target.id);
console.log(event.target);
} function preventDefault(event) {
console.log(event.type);
event.preventDefault();
} function $(sel) {
return document.querySelector(sel);
} }
</script>
</body>
</html>
分享一个很简单的实例:
英雄选择
选择英雄后代码:
效果如下:
最新文章
- 哪些字符需要urlencode编码?具体怎么处理?
- 【MongoBD】MongoBD持久化
- CentOS/Linux安装VNCserver
- python分割sql文件
- drop表,然后创建表,插入数据,并创建索引等内容。
- c语言(3)--运算符&;表达式&;语句
- JNI生成so
- 网络基础四 DNS DHCP 路由 FTP
- 运行yum时出现/var/run/yum.pid已被锁定,PID为xxxx的另一个程序正在运行的问题解决
- N个工作日后的日期
- jsfl 添加代码
- 发布python包
- java--利用DecimalFormat.java类将给定的数字进行格式化
- 关于 Level 和 Promotion,其实就那么简单
- Android开发中Context类的作用以及Context的详细用法
- Qt::WA_DeleteOnClose 造成的野指针问题
- HTTP协议 - 协议格式
- quartz启动Quartz : org.quartz.SchedulerConfigException: Thread count must be >; 0
- IPTABLES简介
- 运维平台cmdb开发-day1
热门文章
- windows下监测tomcat7内存使用情况
- 关于libsvm工具箱在64位matlab下的安装说明
- Spring JdbcTemplate 调用存储过程
- [机器学习] 在茫茫人海中发现相似的你:实现局部敏感哈希(LSH)并应用于文档检索
- fatal error C1010: 在查找预编译头时遇到意外的文件结尾。是否忘记了向源中添加“#include ";StdAfx.h";”? 解决方法
- Matlab 运行C程序出现的编译出错问题
- MyEclipse调用Matlab打包函数
- 播放一个视频并用滚动条控制进度-OpenCV应用学习笔记二
- Use Hibernate core API
- html+css+javascript实现简易轮播图片