前端——html拖拽原理

置顶 已于 2023-12-05 09:25:01 修改
阅读量2.9w 收藏 8
点赞数 5
分类专栏： web站点 JavaScript专栏 文章标签： 前端 html javascript
于 2023-12-05 01:36:46 首次发布
yma16
本文链接：https://blog.csdn.net/qq_38870145/article/details/134794991
版权

文章目录


yma16-logo

⭐前言

大家好，我是yma16，本文分享关于 前端——html拖拽原理。
vue3系列相关文章：
vue3 + fastapi 实现选择目录所有文件自定义上传到服务器
前端vue2、vue3去掉url路由“ # ”号——nginx配置
csdn新星计划vue3+ts+antd赛道——利用inscode搭建vue3(ts)+antd前端模板
认识vite_vue3 初始化项目到打包
python_selenuim获取csdn新星赛道选手所在城市用echarts地图显示
让大模型分析csdn文章质量 —— 提取csdn博客评论在文心一言分析评论区内容
前端vue3——html2canvas给网站截图生成宣传海报
html draggable属性
dragabble属性是HTML5中新增加的属性，可以应用于任何HTML元素上，实现拖拽效果。当该属性设置为true时，元素就可以被拖拽。当元素被拖拽时，会触发dragstart、drag、dragend等事件。

例如：

<div draggable="true">
  拖拽我
</div>

上面的代码会在一个div元素上添加draggable属性，使其可拖拽。通过设置属性值为true，我们就可以实现该元素的拖拽效果。

⭐draggable属性

分解拖动动作

  1. 鼠标选择div
  2. 鼠标按住不放拖拽div
  3. 拖拽的div（源数据）在目标区域div外侧移动
  4. 拖拽的div（源数据）在目标区域div内侧移动
  5. 拖拽的div（源数据）在目标区域div内侧掉落

draggable属性：全局属性 draggable 是一种枚举 (en-US)属性，用于标识元素是否允许使用浏览器原生行为或 HTML 拖放操作 API 拖动。

true: 可以拖动
false: 禁止拖动
auto: 跟随浏览器定义是否可以拖动。
draggable 可以有如下取值：

true：表示元素可以被拖动
false：表示元素不可以被拖动
如果该属性没有设值，则默认值 为 auto，表示使用浏览器定义的默认行为。
注意：
这个属性是枚举类型 (en-US)，而不是布尔类型。这意味着必须显式指定值为 true 或者 false，像 <img draggable> 这样的简写是不允许的。正确的用法是 <img draggable="false">。

💖 api

对象事件说明
被拖动对象drag拖动时反复触发 drag ，事件在用户拖动元素或选择的文本时，每隔几百毫秒就会被触发一次。
被拖动对象dragstart拖动开始时触发，事件在用户开始拖动元素或被选择的文本时调用
被拖动对象dragend拖动结束时触发，事件在拖放操作结束时触发（通过释放鼠标按钮或单击 escape 键）
目标对象drop事件在元素或文本选择被放置到有效的放置目标上时触发。为确保 drop 事件始终按预期触发，应当在处理 dragover 事件的代码部分始终包含 preventDefault() 调用
目标对象 dragenter进入区域时触发，事件在可拖动的元素或者被选择的文本进入一个有效的放置目标时触发
目标对象 dragover悬浮区域时触发，事件在可拖动的元素或者被选择的文本被拖进一个有效的放置目标时（每几百毫秒）触发
目标对象 dragleave离开区域时触发，事件在拖动的元素或选中的文本离开一个有效的放置目标时被触发

💖 单向拖动示例

元素单方向拖动

<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link href="style.css" rel="stylesheet" type="text/css" />
		<title>drag</title>
		<style>
			html {
				height: 100%;
				width: 100%;
				background: #005AA7;  /* fallback for old browsers */
				background: -webkit-linear-gradient(to bottom, #FFFDE4, #005AA7);  /* Chrome 10-25, Safari 5.1-6 */
				background: linear-gradient(to bottom, #FFFDE4, #005AA7); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

			}

			.container {
				text-align: center;
				padding: 64px;
				display: flex;
				justify-content: space-between;
			}

			.container-left {
				width: 40%;
			}

			.container-right {
				width: 40%;
			}

			.container-left-box {
				min-height: 100px;
				line-height: 100px;
				min-width: 400px;
				color:#fff;
				background: #b92b27;  /* fallback for old browsers */
				background: -webkit-linear-gradient(to right, #1565C0, #b92b27);  /* Chrome 10-25, Safari 5.1-6 */
				background: linear-gradient(to right, #1565C0, #b92b27); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

				cursor: pointer;
				border-radius: 8px;
			}

			.container-right-box {
				min-height: 100px;
				line-height: 100px;
				min-width: 400px;
				color:#fff;
				background: #12c2e9;  /* fallback for old browsers */
				background: -webkit-linear-gradient(to right, #f64f59, #c471ed, #12c2e9);  /* Chrome 10-25, Safari 5.1-6 */
				background: linear-gradient(to right, #f64f59, #c471ed, #12c2e9); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

				cursor: pointer;
				border-radius: 8px;
			}

			.dragging {
				opacity: .5;
			}
			
			.dragover{
				opacity: .5;
			}
		</style>
	</head>

	<body>
		<div class="container">
			<div class="container-left">
				<div class="container-left-box" draggable="true" id="source">
					左侧可以拖动
				</div>
			</div>
			<div class="container-right">
				<div class="container-right-box dropzone" id="droptarget">
					可以拖到这里
				</div>
			</div>
		</div>
		<script>
			// 配置项
			const config = {
				draged: null
			}

			function init() {
				console.log('window onload');
				/* 在可拖动的目标上触发的事件 */
				const source = document.getElementById("source");
				source.addEventListener("drag", (event) => {
					console.log("dragging");
				});

				source.addEventListener("dragstart", (event) => {
					// 保存被拖动元素的引用
					config.draged = event.target;
					// 设置为半透明
					event.target.classList.add("dragging");
				});

				source.addEventListener("dragend", (event) => {
					// 拖动结束，重置透明度
					event.target.classList.remove("dragging");
				});

				/* 在放置目标上触发的事件 */
				const target = document.getElementById("droptarget");
				target.addEventListener(
					"dragover",
					(event) => {
						// 阻止默认行为以允许放置
						event.preventDefault();
					},
					false,
				);

				target.addEventListener("dragenter", (event) => {
					// 在可拖动元素进入潜在的放置目标时高亮显示该目标
					if (event.target.classList.contains("dropzone")) {
						event.target.classList.add("dragover");
					}
				});

				target.addEventListener("dragleave", (event) => {
					// 在可拖动元素离开潜在放置目标元素时重置该目标的背景
					if (event.target.classList.contains("dropzone")) {
						event.target.classList.remove("dragover");
					}
				});

				target.addEventListener("drop", (event) => {
					// 阻止默认行为（会作为某些元素的链接打开）
					event.preventDefault();
					// 将被拖动元素移动到选定的目标元素中
					if (event.target.classList.contains("dropzone")) {
						event.target.classList.remove("dragover");
						// 删除自身
						// config.draged.parentNode.removeChild(config.draged);
						event.target.appendChild(config.draged);
					}
				});
			}

			window.onload = init;
		</script>
	</body>

</html>

拖动效果
single-drag-demo

💖 双向拖动示例

元素可以左右拖动

<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link href="style.css" rel="stylesheet" type="text/css" />
		<title>drag</title>
		<style>
			html {
				height: 100%;
				width: 100%;
				background: #005AA7;
				/* fallback for old browsers */
				background: -webkit-linear-gradient(to bottom, #FFFDE4, #005AA7);
				/* Chrome 10-25, Safari 5.1-6 */
				background: linear-gradient(to bottom, #FFFDE4, #005AA7);
				/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

			}

			.container {
				text-align: center;
				padding: 64px;
				display: flex;
				justify-content: space-between;
			}

			.container-left {
				width: 40%;
				border: 1px solid #1565C0;
				border-radius: 8px;
			}

			.container-right {
				width: 40%;
			}

			.container-left-box {
				min-height: 100px;
				min-width: 100px;
				line-height: 100px;
				min-width: 400px;
				color: #fff;
				background: #b92b27;
				/* fallback for old browsers */
				background: -webkit-linear-gradient(to right, #1565C0, #b92b27);
				/* Chrome 10-25, Safari 5.1-6 */
				background: linear-gradient(to right, #1565C0, #b92b27);
				/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

				cursor: pointer;
				border-radius: 8px;
				
			}

			.container-right-box {
				min-height: 100px;
				line-height: 100px;
				min-width: 400px;
				color: #fff;
				background: #12c2e9;
				/* fallback for old browsers */
				background: -webkit-linear-gradient(to right, #f64f59, #c471ed, #12c2e9);
				/* Chrome 10-25, Safari 5.1-6 */
				background: linear-gradient(to right, #f64f59, #c471ed, #12c2e9);
				/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

				cursor: pointer;
				border-radius: 8px;
			}

			.dragging {
				opacity: .5;
			}

			.dragover {
				opacity: .5;
			}
		</style>
	</head>

	<body>
		<div class="container">
			<div class="container-left dropzone" id='left-box'>
				<div class="container-left-box" draggable="true" id="yma16">
					yma16
				</div>
			</div>
			<div class="container-right" id='right-box'>
				<div class="container-right-box dropzone" id="csdn">
					csdn
				</div>
			</div>
		</div>
		<script>
			// 配置项
			const config = {
				draged: null
			}

			const drag = (event) => {
				console.log("dragging");
			}

			const dragStart = (event) => {
				// 保存被拖动元素的引用
				config.draged = event.target;
				// 设置为半透明
				event.target.classList.add("dragging");
			}

			const dragEnd = (event) => {
				// 拖动结束，重置透明度
				event.target.classList.remove("dragging");
			}

			// 目标

			const dragOver = (event) => {
				// 阻止默认行为以允许放置
				event.preventDefault();
			}

			const dragLeave = (event) => {
				// 在可拖动元素离开潜在放置目标元素时重置该目标的背景
				if (event.target.classList.contains("dropzone")) {
					event.target.classList.remove("dragover");
				}
			}

			const dragEnter = (event) => {
				// 在可拖动元素进入潜在的放置目标时高亮显示该目标
				if (event.target.classList.contains("dropzone")) {
					event.target.classList.add("dragover");
				}
			}

			const drop = (event) => {
				// 阻止默认行为（会作为某些元素的链接打开）
				event.preventDefault();
				// 将被拖动元素移动到选定的目标元素中
				if (event.target.classList.contains("dropzone")) {
					event.target.classList.remove("dragover");
					// 删除自身
					config.draged.parentNode.removeChild(config.draged);
					// 添加元素
					event.target.appendChild(config.draged);
				}
			}

			function yma16ToLeft() {

				/* 在放置目标上触发的事件 */
				const target = document.getElementById("left-box");
				if(!target.classList.contains('dropzone')){
					target.classList.add('dropzone')
				}

				target.addEventListener(
					"dragover",
					dragOver,
					false,
				);

				target.addEventListener("dragenter", dragEnter);

				target.addEventListener("dragleave", dragLeave);

				target.addEventListener("drop", drop);
			}

			function yma16ToRight() {
				
				const source = document.getElementById("yma16");
				source.addEventListener("drag", drag);

				source.addEventListener("dragstart", dragStart);

				source.addEventListener("dragend", dragEnd);

				/* 在放置目标上触发的事件 */
				const target = document.getElementById("csdn");
				

				target.addEventListener(
					"dragover",
					dragOver,
					false,
				);

				target.addEventListener("dragenter", dragEnter);

				target.addEventListener("dragleave", dragLeave);

				target.addEventListener("drop", drop);
			}


			function init() {
				console.log('window onload');
				/* 在可拖动的目标上触发的事件 */
				yma16ToLeft()
				yma16ToRight()
			}

			window.onload = init;
		</script>
	</body>

</html>

效果如下：
双向拖动

⭐总结

HTML的draggable属性可以将元素设置为可拖动的。它可以帮助我们实现拖拽功能，让用户可以将元素拖拽到指定的位置或者执行拖拽结束后的某些操作。draggable属性有以下几个取值：

  1. draggable=“true”：表示元素可以被拖动。

  2. draggable=“false”：表示元素不可以被拖动。

  3. draggable=“auto”：表示元素可以被拖动，但是浏览器会根据元素类型和属性自动决定是否允许拖动。

在使用draggable属性时，需要注意以下几点：

  1. 可以设置辅助属性dataTransfer来传输数据。

  2. 可以设置ondragstart、ondrag、ondragenter、ondragover、ondragleave和ondragend等事件来实现一些特定操作。

  3. 需要在ondrop事件中阻止默认行为，否则拖拽的元素将会被打开或者在浏览器中进行导航。

综上所述，draggable属性是一个非常实用的属性，可以帮助我们实现一些常用的拖拽功能。

⭐结束

本文分享到这结束，如有错误或者不足之处欢迎指出！
sence

👍 点赞，是我创作的动力！
⭐️ 收藏，是我努力的方向！
✏️ 评论，是我进步的财富！
💖 感谢你的阅读！

yma16
关注
  • 5
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 6
    评论
专栏目录
Google Android SDK开发范例大全(PDF完整版4)（4-4）
01-30
Google Android SDK开发范例大全(完整版)共4个分卷 目录 第1章 了解.深入.动手做. 1.1 红透半边天的Android 1.2 本书目的及涵盖范例范围 1.3 如何阅读本书 1.4 使用本书范例 1.5 参考网站 第2章 Android初体验 2.1 安装AndroidSDK与ADTplug-in 2.2 建立第一个Android项目(HelloAndroid！) 2.3 Android应用程序架构——从此开始 2.4 可视化的界面开发工具 2.5 部署应用程序到Android手机 第3章 用户人机界面 3.1 更改与显示文字标签——TextView标签的使用 3.2 更改手机窗口画面底色——drawable定义颜色常数的方法 3.3 更改TextView文字颜色——引用Drawable颜色常数及背景色 3.4 置换TextView文字——CharSequence数据类型与ResourceID应用 3.5 取得手机屏幕大小——DisplayMetrics取得画面宽高的方法 3.6 样式化的定型对象——Style样式的定义 3.7 简易的按钮事件——Button事件处理 3.8 手机页面的转换——setContentView的应用 3.9 调用另一个Activity——Intent对象的使用 3.10 不同Activity之间的数据传递——Bundle对象的实现 3.11 返回数据到前一个Activity——startActivityForResult方法 3.12 具有交互功能的对话框——AlertDialog窗口 3.13 置换文字颜色的机关——Button与TextView的交互 3.14 控制不同的文字字体——Typeface对象使用 3.15 如iPhone拖动相片特效——Gallery画廊 3.16 自制计算器——多按钮的整合应用 3.17 关于(About)程序信息——Menu功能菜单程序设计 3.18 程序加载中,请稍后——ProgressDialog与线程整合应用 3.19 全屏幕以按钮覆盖——动态产生按钮并最大化 3.20 今晚到哪儿打牙祭？——具选择功能的对话框 3.21 Android变脸——主题(Theme)实现 第4章 史上超豪华的手机控件 4.1 EditText与TextView共舞——setOnKeyListener事件 4.2 设计具有背景图的按钮——ImageButton的焦点及事件处理 4.3 给耶诞老人的信息——Toast对象的使用 4.4 我同意条款——CheckBox的isChecked属性 4.5 消费券采购列表——多选项CheckBox的应用 4.6 向左或向右——RadioGroup组与onCheckedChanged事件 4.7 专业相框设计——ImageView的堆栈应用 4.8 自定义下拉菜单模式——Spinner与setDropDownViewResource 4.9 动态添加/删除的Spinner菜单——ArrayList与Widget的依赖性 4.10 心爱小宝贝相片集——Gallery与衍生BaseAdapter容器 4.11 快速的搜索手机文件引擎——JavaI/O的应用 4.12 按钮也能随点击变换——ImageButton选择特效 4.13 具自动提示功能的菜单——AutoCompleteTextView与数组 4.14 数字及模拟小时钟设计——AnalogClock与DigitalClock的原理 4.15 动态输入日期与时间——DatePicker与TimePicker应用 4.16 猜猜红心A在那儿——ImageView点击事件与透明度处理 4.17 后台程序运行进度提示——ProgressBar与Handler的整合应用 4.18 动态文字排版——GridView与ArrayAdapter设计 4.19 在Activity里显示列表列表——ListView的布局 4.20 以动态列表配置选项——ListActivity与Menu整合技巧 4.21 查找程序根目录下所有文件——JavaI/O与ListActivity的结合.. 4.22 加载手机磁盘里的图文件——使用decodeFile方法 4.23 动态放大缩小ImageView里的图片——运用Matrix对象来缩放图文件 4.24 动态旋转图片——Bitmap与Matrix旋转ImageView 4.25 猜猜我在想什么——RadioButtonID 4.26 离开与关闭程序的弹出窗口——对话窗口上的ICON图标 第5章 交互式通信服务与手机控制 5.1 具有正则表达式的TextView——Linkify规则 5.2 ACTION！CALL！拨打电话——Intent.ACTION.CALL的使用 5.3 自制发送短信程序——SmsManager与PendingIntent对象 5.4 自制发送Email程序——Intent在Email上的使用 5.5 自制日历手机数据库——实现SQLiteOpenHelper 5.6 手机震动的节奏——Vibrator对象及周期运用 5.7 图文可视化提醒——Toast与LinearLayoutView 5.8 状态栏的图标与文字提醒——NotificationManager与Notification对象的应用 5.9 搜索手机通讯录自动完成——使用ContentResolver 5.10 取得联系人资料——Provider.Contact的使用 5.11 制作有图标的文件资源管理器——自定义Adapter对象 5.12 还原手机默认桌面——重写clearWallpaper方法 5.13 置换手机背景图——Gallery与setWallpaper整合实现 5.14 撷取手机现存桌面——getWallpaper与setImageDrawable 5.15 文件资源管理器再进化——JavaI/O修改文件名及删除 5.16 取得目前File与Cache的路径——getCacheDir与getFilesDir 5.17 打开/关闭WiFi服务——WifiManager状态判断 5.18 取得SIM卡内的信息——TelephonyManager的应用 5.19 调用拨号按钮——打电话CALL_BUTTON 5.20 DPAD按键处理——onKeyDown事件与Layout坐标交互 5.21 任务管理器正在运行的程序——RunningTaskInfo 5.22 动态更改屏幕方向——LANDSCAPE与PORTRAIT 5.23 系统设置更改事件——onConfigurationChanged信息处理 5.24 取得电信网络与手机相关信息——TelephonyManager与android.provider.Settings.System的应用 第6章 手机自动服务纪实 6.1 您有一条短信popup提醒——常驻BroadcastReceiver的应用 6.2 手机电池计量还剩多少——使用BroadcastReceiver捕捉Intent.ACTION_BATTERY_CHANGED 6.3 群发拜年短信给联系人——ACTION_PICK与Uri对象 6.4 开始与停止系统服务——Service与Runnable整合并用 6.5 通过短信发送email通知——BroadcastReceiver与Intent整合 6.6 手机拨接状态——PhoneStateListener之onCallStateChanged 6.7 有来电,发送邮件通知——PhoneStateListener与ACTION_SEND 6.8 存储卡剩余多少容量——Environment加StatFs 6.9 访问本机内存与存储卡——File的创建与删除 6.10 实现可定时响起的闹钟——PendingIntent与AlarmManager的运用 6.11 黑名单来电自动静音——PhoneStateListener与AudioManager 6.12 手机翻背面即静音震动——SensorListener及AudioManager整合应用 6.13 指定时间置换桌面背景——多AlarmManager事件处理 6.14 判断发送短信后的状态——BroadcastReceiver聆听PendingIntent 6.15 后台服务送出广播信息——sendBroadcast与BroadcastReceiver 6.16 开机程序设计——receiver与intent-filter协同作业 6.17 双向短信常驻服务——Service与receiver实例 第7章 娱乐多媒体 7.1 访问Drawable资源的宽高——ContextMenu与Bitmap的应用 7.2 绘制几何图形——使用android.graphics类 7.3 手机屏幕保护程序——FadeIn/FadeOut特效与运行线程 7.4 用手指移动画面里的照片——onTouchEvent事件判断 7.5 加载存储卡的Gallery相簿——FileArrayList 7.6 取得手机内置媒体里的图文件——ACTION_GET_CONTENT取回InputStream 7.7 相片导航向导与设置背景桌面——ImageSwitcher与Gallery 7.8 调整音量大小声——AudioManager控制音量 7.9 播放mp3资源文件——raw文件夹与MediaPlayer的使用 7.10 播放存储卡里的mp3音乐——MediaPlayer.setDataSource 7.11 自制录音/播放录音程序——MediaRecorder与AudioEncoder 7.12 通过收到短信开始秘密录音——MediaRecorder与BroadcastReceiver实例 7.13 内置影片播放器载入3gp电影——VideoViewWidget 7.14 自制3gp影片播放器——MediaPlayer与实现SurfaceView 7.15 相机预览及拍照临时文件——Camera及PictureCallback事件 第8章 当Android与Internet接轨 8.1 HTTPGET/POST传递参数——HTTP连接示范 8.2 在程序里浏览网页——WebView.loadUrl 8.3 嵌入HTML标记的程序——WebView.loadData 8.4 设计前往打开网页功能——Intent与Uri.parse 8.5 将网络图像网址放入Gallery中显示——URL.URLConnection.BaseAdapter 8.6 即时访问网络图文件展示——HttpURLConnection 8.7 手机气象局,实时卫星云图——HttpURLConnection与URLConnection和运行线程 8.8 通过网络播放MP3——Runnable存储FileOutputStream技巧 8.9 设置远程下载音乐为手机铃声——RingtoneManager与铃声存放路径 8.10 远程下载桌面背景图案——URLConnection与setWallpaper()搭配 8.11 将手机文件上传至网站服务器——模拟HTTPFORM的POSTACTION 8.12 移动博客发布器——以XML-RPC达成远程过程调用 8.13 移动RSS阅读器——利用SAXParser解析XML 8.14 远程下载安装Android程序——APKInstaller的应用 8.15 手机下载看3gp影片——Runnable混搭SurfaceView 8.16 访问网站LoginAPI——远程服务器验证程序运行权限 8.17 地震速报！——HttpURLConnection与Service侦测服务 第9章 Google服务与Android混搭 9.1 Google帐号验证Token——AuthSub 9.2 Google搜索——AutoCompleteTextView与GoogleSearchAPI 9.3 前端产生QRCode二维条形码——GoogleChartAPI 9.4 以经纬度查找目的地位置——GeoPoint与MapView的搭配运用 9.5 GPSGoogle地图——LocationListener与MapView实时更新 9.6 移动版GoogleMap——Geocoder反查Address对象 9.7 规划导航路径——DirectionsRoute 9.8 移动设备上的Picasa相册——GooglePicasaAPI 9.9 随身翻译机——GoogleTranslateAPI 第10章 创意Android程序设计 10.1 手机手电筒——PowerManager控制WakeLock并改变手机亮度 10.2 GPS轨迹记录器——利用LocationListener在地图上画图并换算距离 10.3 女性贴身看护——AlarmManager.DatePicker.TimePicker 10.4 手机QRCode二维条形码生成器——Canvas与SurfaceHolder绘图 10.5 AndroidQRCode二维条形码扫描仪——BitmapFactory.decodeByteArray 10.6 上班族今天中午要吃什么——热量骰子地图 10.7 掷杯筊——把手机放在空中甩事件处理...
利用HTML5的drop、drag及拖动属性做元素位置交换
07-01
使用九宫格作为画布背景；每个九宫格中的元素为数字、数学公式、物理公式(注:一切能在数学条件下代表大小的元素)；拖动九宫格选中元素到目标元素，元素进行两两交换位置；在每一次元素位置发生变化时进行比较当前九宫格中所有元素是否由小到大顺序排列，如顺序排列就进入下一关；
html5 draggable 随意拖动任意位置
最新发布
书中自有妍如玉的博客
02-01 695
【代码】html5 draggable 随意拖动任意位置。
Google+Android+SDK开发范例大全
03-07
Google Android SDK开发范例大全(完整版)共4个分卷 目录 第1章 了解.深入.动手做. 1.1 红透半边天的Android 1.2 本书目的及涵盖范例范围 1.3 如何阅读本书 1.4 使用本书范例 1.5 参考网站 第2章 Android初体验 2.1 安装AndroidSDK与ADTplug-in 2.2 建立第一个Android项目(HelloAndroid！) 2.3 Android应用程序架构——从此开始 2.4 可视化的界面开发工具 2.5 部署应用程序到Android手机 第3章 用户人机界面 3.1 更改与显示文字标签——TextView标签的使用 3.2 更
Google Android SDK开发范例大全(PDF高清完整版1)（4-1）
01-30
Google Android SDK开发范例大全(完整版)共4个分卷 目录 第1章 了解.深入.动手做. 1.1 红透半边天的Android 1.2 本书目的及涵盖范例范围 1.3 如何阅读本书 1.4 使用本书范例 1.5 参考网站 第2章 Android初体验 2.1 安装AndroidSDK与ADTplug-in 2.2 建立第一个Android项目(HelloAndroid！) 2.3 Android应用程序架构——从此开始 2.4 可视化的界面开发工具 2.5 部署应用程序到Android手机 第3章 用户人机界面 3.1 更改与显示文字标签——TextView标签的使用 3.2 更改手机窗口画面底色——drawable定义颜色常数的方法 3.3 更改TextView文字颜色——引用Drawable颜色常数及背景色 3.4 置换TextView文字——CharSequence数据类型与ResourceID应用 3.5 取得手机屏幕大小——DisplayMetrics取得画面宽高的方法 3.6 样式化的定型对象——Style样式的定义 3.7 简易的按钮事件——Button事件处理 3.8 手机页面的转换——setContentView的应用 3.9 调用另一个Activity——Intent对象的使用 3.10 不同Activity之间的数据传递——Bundle对象的实现 3.11 返回数据到前一个Activity——startActivityForResult方法 3.12 具有交互功能的对话框——AlertDialog窗口 3.13 置换文字颜色的机关——Button与TextView的交互 3.14 控制不同的文字字体——Typeface对象使用 3.15 如iPhone拖动相片特效——Gallery画廊 3.16 自制计算器——多按钮的整合应用 3.17 关于(About)程序信息——Menu功能菜单程序设计 3.18 程序加载中,请稍后——ProgressDialog与线程整合应用 3.19 全屏幕以按钮覆盖——动态产生按钮并最大化 3.20 今晚到哪儿打牙祭？——具选择功能的对话框 3.21 Android变脸——主题(Theme)实现 第4章 史上超豪华的手机控件 4.1 EditText与TextView共舞——setOnKeyListener事件 4.2 设计具有背景图的按钮——ImageButton的焦点及事件处理 4.3 给耶诞老人的信息——Toast对象的使用 4.4 我同意条款——CheckBox的isChecked属性 4.5 消费券采购列表——多选项CheckBox的应用 4.6 向左或向右——RadioGroup组与onCheckedChanged事件 4.7 专业相框设计——ImageView的堆栈应用 4.8 自定义下拉菜单模式——Spinner与setDropDownViewResource 4.9 动态添加/删除的Spinner菜单——ArrayList与Widget的依赖性 4.10 心爱小宝贝相片集——Gallery与衍生BaseAdapter容器 4.11 快速的搜索手机文件引擎——JavaI/O的应用 4.12 按钮也能随点击变换——ImageButton选择特效 4.13 具自动提示功能的菜单——AutoCompleteTextView与数组 4.14 数字及模拟小时钟设计——AnalogClock与DigitalClock的原理 4.15 动态输入日期与时间——DatePicker与TimePicker应用 4.16 猜猜红心A在那儿——ImageView点击事件与透明度处理 4.17 后台程序运行进度提示——ProgressBar与Handler的整合应用 4.18 动态文字排版——GridView与ArrayAdapter设计 4.19 在Activity里显示列表列表——ListView的布局 4.20 以动态列表配置选项——ListActivity与Menu整合技巧 4.21 查找程序根目录下所有文件——JavaI/O与ListActivity的结合.. 4.22 加载手机磁盘里的图文件——使用decodeFile方法 4.23 动态放大缩小ImageView里的图片——运用Matrix对象来缩放图文件 4.24 动态旋转图片——Bitmap与Matrix旋转ImageView 4.25 猜猜我在想什么——RadioButtonID 4.26 离开与关闭程序的弹出窗口——对话窗口上的ICON图标 第5章 交互式通信服务与手机控制 5.1 具有正则表达式的TextView——Linkify规则 5.2 ACTION！CALL！拨打电话——Intent.ACTION.CALL的使用 5.3 自制发送短信程序——SmsManager与PendingIntent对象 5.4 自制发送Email程序——Intent在Email上的使用 5.5 自制日历手机数据库——实现SQLiteOpenHelper 5.6 手机震动的节奏——Vibrator对象及周期运用 5.7 图文可视化提醒——Toast与LinearLayoutView 5.8 状态栏的图标与文字提醒——NotificationManager与Notification对象的应用 5.9 搜索手机通讯录自动完成——使用ContentResolver 5.10 取得联系人资料——Provider.Contact的使用 5.11 制作有图标的文件资源管理器——自定义Adapter对象 5.12 还原手机默认桌面——重写clearWallpaper方法 5.13 置换手机背景图——Gallery与setWallpaper整合实现 5.14 撷取手机现存桌面——getWallpaper与setImageDrawable 5.15 文件资源管理器再进化——JavaI/O修改文件名及删除 5.16 取得目前File与Cache的路径——getCacheDir与getFilesDir 5.17 打开/关闭WiFi服务——WifiManager状态判断 5.18 取得SIM卡内的信息——TelephonyManager的应用 5.19 调用拨号按钮——打电话CALL_BUTTON 5.20 DPAD按键处理——onKeyDown事件与Layout坐标交互 5.21 任务管理器正在运行的程序——RunningTaskInfo 5.22 动态更改屏幕方向——LANDSCAPE与PORTRAIT 5.23 系统设置更改事件——onConfigurationChanged信息处理 5.24 取得电信网络与手机相关信息——TelephonyManager与android.provider.Settings.System的应用 第6章 手机自动服务纪实 6.1 您有一条短信popup提醒——常驻BroadcastReceiver的应用 6.2 手机电池计量还剩多少——使用BroadcastReceiver捕捉Intent.ACTION_BATTERY_CHANGED 6.3 群发拜年短信给联系人——ACTION_PICK与Uri对象 6.4 开始与停止系统服务——Service与Runnable整合并用 6.5 通过短信发送email通知——BroadcastReceiver与Intent整合 6.6 手机拨接状态——PhoneStateListener之onCallStateChanged 6.7 有来电,发送邮件通知——PhoneStateListener与ACTION_SEND 6.8 存储卡剩余多少容量——Environment加StatFs 6.9 访问本机内存与存储卡——File的创建与删除 6.10 实现可定时响起的闹钟——PendingIntent与AlarmManager的运用 6.11 黑名单来电自动静音——PhoneStateListener与AudioManager 6.12 手机翻背面即静音震动——SensorListener及AudioManager整合应用 6.13 指定时间置换桌面背景——多AlarmManager事件处理 6.14 判断发送短信后的状态——BroadcastReceiver聆听PendingIntent 6.15 后台服务送出广播信息——sendBroadcast与BroadcastReceiver 6.16 开机程序设计——receiver与intent-filter协同作业 6.17 双向短信常驻服务——Service与receiver实例 第7章 娱乐多媒体 7.1 访问Drawable资源的宽高——ContextMenu与Bitmap的应用 7.2 绘制几何图形——使用android.graphics类 7.3 手机屏幕保护程序——FadeIn/FadeOut特效与运行线程 7.4 用手指移动画面里的照片——onTouchEvent事件判断 7.5 加载存储卡的Gallery相簿——FileArrayList 7.6 取得手机内置媒体里的图文件——ACTION_GET_CONTENT取回InputStream 7.7 相片导航向导与设置背景桌面——ImageSwitcher与Gallery 7.8 调整音量大小声——AudioManager控制音量 7.9 播放mp3资源文件——raw文件夹与MediaPlayer的使用 7.10 播放存储卡里的mp3音乐——MediaPlayer.setDataSource 7.11 自制录音/播放录音程序——MediaRecorder与AudioEncoder 7.12 通过收到短信开始秘密录音——MediaRecorder与BroadcastReceiver实例 7.13 内置影片播放器载入3gp电影——VideoViewWidget 7.14 自制3gp影片播放器——MediaPlayer与实现SurfaceView 7.15 相机预览及拍照临时文件——Camera及PictureCallback事件 第8章 当Android与Internet接轨 8.1 HTTPGET/POST传递参数——HTTP连接示范 8.2 在程序里浏览网页——WebView.loadUrl 8.3 嵌入HTML标记的程序——WebView.loadData 8.4 设计前往打开网页功能——Intent与Uri.parse 8.5 将网络图像网址放入Gallery中显示——URL.URLConnection.BaseAdapter 8.6 即时访问网络图文件展示——HttpURLConnection 8.7 手机气象局,实时卫星云图——HttpURLConnection与URLConnection和运行线程 8.8 通过网络播放MP3——Runnable存储FileOutputStream技巧 8.9 设置远程下载音乐为手机铃声——RingtoneManager与铃声存放路径 8.10 远程下载桌面背景图案——URLConnection与setWallpaper()搭配 8.11 将手机文件上传至网站服务器——模拟HTTPFORM的POSTACTION 8.12 移动博客发布器——以XML-RPC达成远程过程调用 8.13 移动RSS阅读器——利用SAXParser解析XML 8.14 远程下载安装Android程序——APKInstaller的应用 8.15 手机下载看3gp影片——Runnable混搭SurfaceView 8.16 访问网站LoginAPI——远程服务器验证程序运行权限 8.17 地震速报！——HttpURLConnection与Service侦测服务 第9章 Google服务与Android混搭 9.1 Google帐号验证Token——AuthSub 9.2 Google搜索——AutoCompleteTextView与GoogleSearchAPI 9.3 前端产生QRCode二维条形码——GoogleChartAPI 9.4 以经纬度查找目的地位置——GeoPoint与MapView的搭配运用 9.5 GPSGoogle地图——LocationListener与MapView实时更新 9.6 移动版GoogleMap——Geocoder反查Address对象 9.7 规划导航路径——DirectionsRoute 9.8 移动设备上的Picasa相册——GooglePicasaAPI 9.9 随身翻译机——GoogleTranslateAPI 第10章 创意Android程序设计 10.1 手机手电筒——PowerManager控制WakeLock并改变手机亮度 10.2 GPS轨迹记录器——利用LocationListener在地图上画图并换算距离 10.3 女性贴身看护——AlarmManager.DatePicker.TimePicker 10.4 手机QRCode二维条形码生成器——Canvas与SurfaceHolder绘图 10.5 AndroidQRCode二维条形码扫描仪——BitmapFactory.decodeByteArray 10.6 上班族今天中午要吃什么——热量骰子地图 10.7 掷杯筊——把手机放在空中甩事件处理...
Google Android SDK开发范例大全(PDF高清完整版3)（4-3）
01-30
Google Android SDK开发范例大全(完整版)共4个分卷 目录 第1章 了解.深入.动手做. 1.1 红透半边天的Android 1.2 本书目的及涵盖范例范围 1.3 如何阅读本书 1.4 使用本书范例 1.5 参考网站 第2章 Android初体验 2.1 安装AndroidSDK与ADTplug-in 2.2 建立第一个Android项目(HelloAndroid！) 2.3 Android应用程序架构——从此开始 2.4 可视化的界面开发工具 2.5 部署应用程序到Android手机 第3章 用户人机界面 3.1 更改与显示文字标签——TextView标签的使用 3.2 更改手机窗口画面底色——drawable定义颜色常数的方法 3.3 更改TextView文字颜色——引用Drawable颜色常数及背景色 3.4 置换TextView文字——CharSequence数据类型与ResourceID应用 3.5 取得手机屏幕大小——DisplayMetrics取得画面宽高的方法 3.6 样式化的定型对象——Style样式的定义 3.7 简易的按钮事件——Button事件处理 3.8 手机页面的转换——setContentView的应用 3.9 调用另一个Activity——Intent对象的使用 3.10 不同Activity之间的数据传递——Bundle对象的实现 3.11 返回数据到前一个Activity——startActivityForResult方法 3.12 具有交互功能的对话框——AlertDialog窗口 3.13 置换文字颜色的机关——Button与TextView的交互 3.14 控制不同的文字字体——Typeface对象使用 3.15 如iPhone拖动相片特效——Gallery画廊 3.16 自制计算器——多按钮的整合应用 3.17 关于(About)程序信息——Menu功能菜单程序设计 3.18 程序加载中,请稍后——ProgressDialog与线程整合应用 3.19 全屏幕以按钮覆盖——动态产生按钮并最大化 3.20 今晚到哪儿打牙祭？——具选择功能的对话框 3.21 Android变脸——主题(Theme)实现 第4章 史上超豪华的手机控件 4.1 EditText与TextView共舞——setOnKeyListener事件 4.2 设计具有背景图的按钮——ImageButton的焦点及事件处理 4.3 给耶诞老人的信息——Toast对象的使用 4.4 我同意条款——CheckBox的isChecked属性 4.5 消费券采购列表——多选项CheckBox的应用 4.6 向左或向右——RadioGroup组与onCheckedChanged事件 4.7 专业相框设计——ImageView的堆栈应用 4.8 自定义下拉菜单模式——Spinner与setDropDownViewResource 4.9 动态添加/删除的Spinner菜单——ArrayList与Widget的依赖性 4.10 心爱小宝贝相片集——Gallery与衍生BaseAdapter容器 4.11 快速的搜索手机文件引擎——JavaI/O的应用 4.12 按钮也能随点击变换——ImageButton选择特效 4.13 具自动提示功能的菜单——AutoCompleteTextView与数组 4.14 数字及模拟小时钟设计——AnalogClock与DigitalClock的原理 4.15 动态输入日期与时间——DatePicker与TimePicker应用 4.16 猜猜红心A在那儿——ImageView点击事件与透明度处理 4.17 后台程序运行进度提示——ProgressBar与Handler的整合应用 4.18 动态文字排版——GridView与ArrayAdapter设计 4.19 在Activity里显示列表列表——ListView的布局 4.20 以动态列表配置选项——ListActivity与Menu整合技巧 4.21 查找程序根目录下所有文件——JavaI/O与ListActivity的结合.. 4.22 加载手机磁盘里的图文件——使用decodeFile方法 4.23 动态放大缩小ImageView里的图片——运用Matrix对象来缩放图文件 4.24 动态旋转图片——Bitmap与Matrix旋转ImageView 4.25 猜猜我在想什么——RadioButtonID 4.26 离开与关闭程序的弹出窗口——对话窗口上的ICON图标 第5章 交互式通信服务与手机控制 5.1 具有正则表达式的TextView——Linkify规则 5.2 ACTION！CALL！拨打电话——Intent
前端实现拖拽效果改变元素顺序
小祥编程擅长前端
05-23 2073
在一次工作中，前端要实现通过鼠标实现拖拽改变顺序的功能，之前没有接触过拖拽这一块所以刚开始一筹莫展，幸运的是在查阅学习中实现了前端拖拽功能。操作都是在handleDragEnter（）这个函数中来实现的，所以并不难，只需要我们在这个函数中写js逻辑即可。
HTML5 学习笔记（七）--- 元素拖放
weixin_45092437的博客
08-04 759
一、拖放事件 1、概念 ​ 在 HTML5 中增加了多个针对元素拖放的事件，使实现元素拖放变得更简单。拖放事件仅仅能实现拖放的动作，要想真正实现拖放后进行数据交互，还需要结合 dataTransfer 对象，才能真正实现拖放效果。 ​ **注意：**要实现元素拖放，首先要在目标元素上 设置 draggable = “true” ，否则无法实现拖放。 2、事件 **① dragStart：**在元素拖动开始时触发，事件对象是被拖动元素。 **② drag：**在元素拖动过程中触发，事件对象是被拖动元素。
详解HTML中的拖拽案例和难点分析
前端开发博客
08-18 2909
拖拽入门拖拽是一种常见的交互行为，在HTML中通过使用拖拽相关的属性和事件可以实现元素的拖拽功能。下面我会详细解释HTML中拖拽的相关属性，以及提供一个例子来说明。在HTML中，拖拽功能涉及以下几个主要的属性和事件：draggable属性：该属性用于定义元素是否可拖拽。将draggable属性设置为"true"表示元素可拖拽，设置为"false"表示元素不可拖拽。默认情况下，元素是不可拖拽的。on...
前端实现拖拽的方案
望京十三兄的博客
04-06 3294
创建一个区域 只需要在标签上添加 ondragover 和 ondrop 方法即可，表示这个区域可放置并进行处理。此时，元素已经可以拖动了，但会显示一个禁止的图标，这是因为没有可放置的区域。还需要在需要拖动的元素上添加 ondragstart 方法。
前端实现拖放功能
前端学习笔记
11-01 3901
前言 前段时间有一个朋友问我前端能否实现拖放功能，大体是用拖放来调整列表顺序。 虽然我没有做过，但我见过有这种功能这样的网站呀，所以毫不犹豫的说绝对可以实现（反正不是我写）。 谁知道才过去不到一周，我自己所就职的公司也要添加一个拖放功能，而且还升级了，比拖放改变列表顺序难度更大。。。。，没办法，做呗。 好在我在我朋友问我的时候去网上查了下资料，看到了html5中有这么一个功能。 话不多说，开始干吧。 实现方法 一、什么是拖放 菜鸟教程-拖放功能 简单来说，就是把一个元素拖到另一个地方，并完成相应的功能。 官
利用HTML5的drop、drag及拖动属性做元素位置交换《我是学霸》
ZC
06-24 9342
很久没来这里，我也安静了很久。html5 jquery drop drag cookie web css3 利用HTML5的drop、drag及拖动属性做元素位置交换《我是学霸》
前端Dom鼠标点击拖拽
秋来九月八
03-02 1090
前端时间开发的过程中，遇到一个鼠标拖拽dom的需求，这个需求还是十分常见的，与大家一起分享我的想法。 解决这个需求有两种思路，其中一种是通过H5原生的拖拽事件ondragstart、ondragend，另一种则是通过监听鼠标的onmousedown、onmousemove、onmouseup事件。 ondragstart、ondragend详解 1.首先确认需要被拖拽的dom，在上面加上属性draggable为true，否则ondragstart和ondragend和ondrag事件都无法生效。 <d
JavaScript拖拽API，ondragstart、ondragover、ondragenter、ondrop，使用详细（JavaScript常用原生拖拽API）
weixin_65793170的博客
05-30 3672
JavaScript的拖拽api相必大家都不陌生，今天来分享下元素在拖动时触发的事件，顺便做下记录。
html5拖放原理,html5之拖放详解
weixin_39557373的博客
05-30 224
拖放是一种常见的特性，即抓取对象以后拖到另一个位置。在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。1.drggable属性如果网页元素的draggable元素为true，这个元素就是可以拖动的。Draggable Div注意：在大多数浏览器中，a元素和img元素默...
html 拖拽事件详解
qq_42880714的博客
01-31 2813
html拖拽事件详解
HTML元素拖动
eliodadada的博客
04-14 757
需要注意的是：dragenter和dragover事件的默认行为是拒绝接受任何被拖放的元素。因此，我们必须阻止浏览器这种默认行为。拖放涉及到两种元素，一种是被拖拽元素（源对象），一种是放置区元素（目标对象）。如下图所示，按住A元素往B元素拖拽，A元素即为源对象，B元素即为目标对象。首先，为了使元素可拖动，把 draggable 属性设置为。1. 设置元素为可拖放。
HTML5 拖放（Drag 和 Drop）html排序拖拽案例，vue仿照element穿梭框拖拽案例。
qq_54753561的博客
05-11 2105
HTML5 拖放（Drag 和 Drop）html排序拖拽案例，vue仿照element穿梭框拖拽案例。
前端html可拖拽js弹框插件
05-01
前端html可拖拽js弹框插件是一款用于网页设计的插件，它可以让用户自由拖拽和移动弹框位置，也可以进行大小的调整。该插件可与前端的HTML代码集成，方便用户使用。 用户可以使用该插件调整弹框的大小和位置，以符合自己的需求。该插件也提供了定制化样式的功能，可以更好地满足不同用户的需求。用户无需编写复杂的代码，只需要简单的操作即可实现弹框的拖拽和大小调整。在网页设计中，该插件可以提高用户体验，让用户在使用时更加便捷和舒适。 该插件还提供了多种弹框样式供用户选择，用户可以根据自己的品牌形象选择不同的风格，以展示自己的独特特色。这些不同的样式和颜色，都可以使弹框更加吸引人，从而提高网站的转化率和用户留存率。 总之，前端html可拖拽js弹框插件是一款非常实用的插件，它能够使用户更加便捷地实现弹框的功能，并提高用户的整体体验。如果您是一名网站开发者，那么这款插件将为您的网站注入新的动力，让您的用户感到更加舒适和便捷。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

yma16

感谢支持！共勉！

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值