图片拖拽排序与拖拽删除

最新推荐文章于 2024-06-19 15:39:02 发布
最新推荐文章于 2024-06-19 15:39:02 发布
阅读量1.4k 收藏 1
点赞数 1
分类专栏： javascript 文章标签： 拖拽排序

转自：https://www.zhangxinxu.com/wordpress/2016/11/html5-drag-drop-module-insert-sort-delete-demo/

代码基于jQuery编写，可以省点事件。另外，兼容性是IE10+以及其他现代浏览器效果OK，不支持IE7-IE9浏览器，因为使用的是原生的HTML5 drag/drop API，一般适合开发一些工具后者内网项目的时候使用。如果对兼容性有要求，大家可以去搜一搜一些复杂的jQuery插件。 


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="description" content="基于HTML5 drag/drop的模块拖动插入排序和删除 » 张鑫旭-鑫空间-鑫生活" />
<meta name="description" content="张鑫旭web前端学习实例页面 基于HTML5 drag/drop的模块拖动插入排序和删除" />
<meta name="keywords" content="web前端, css, jQuery, javascript" />
<meta name="author" content="张鑫旭, zhangxinxu" />
<title>基于HTML5 drag/drop的模块拖动插入排序和删除 » 张鑫旭-鑫空间-鑫生活</title>
<style>
.demo {
	padding-top: 30px;
}
.container {
	background-color: #f0f3f9;
	font-family: 'PingFang SC', 'Microsoft Yahei';
	min-height: 610px;
	position: relative;
	overflow: hidden;
}
.module-ul {
	width: 180px;
	position: absolute; top: 0; bottom: 0; left: 0;
	list-style: none;
	margin: 0;
	padding: 0;
	background-color: #34538b;
}
.module-li {
	margin: 20px auto;
	padding: 10px 0;
	background-color: #fff;
	width: 150px;
	text-align: center;
	cursor: move;
	position: relative;
}
.module-li:hover::before {
	content: '';	
	position: absolute;
	left: 0; right: 0; top: 0; bottom: 0;
	padding: 10px;
	background-color: rgba(0,0,0,.5);
}
.module-body {
	margin-left: 180px;
}
.module-stage {
	max-width: 90%;
	min-width: 600px;
	margin: 0 auto;
}
.module-placeholder {
    height: 584px;
    background-color: #fff;
    position: relative;
	margin: 20px 0;
}
.module-placeholder:empty::before {
    position: absolute;
    left: 50%;
    top: 50%;
	-ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    color: #aaa;
    content: '从左侧拖模块放这里';
    font-size: 20px;
}
.module-placeholder.dragenter {
	outline: 2px dashed #ddd;
}

.module-drag {
	padding: 10px 0;
	margin: 20px 0;
	background-color: #fff;
	text-align: center;
	cursor: move;
	position: relative;
}
.module-drag.dragstart {
	opacity: .5;
}
.module-drag:hover::before {
	content: '';
	position: absolute;
	top: 0; left: 0; bottom: 0; right: 0;
}

/* 模块拖拽删除 */
.module-remove {
	position: absolute;
	top: 0; bottom: 0; left: -180px;
	width: 180px;
	padding-top: 40px;
	background-color: #34538b;
	transition: left .25s, background-color .2s;
	z-index: 1;
}
.module-remove.dragenter {
	left: 0;
}
.module-remove-icon {
	position: absolute;
	font-size: 160px;
	left: 50%; top: 0;margin-top: 100px;
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	color: #fff;
}
.module-remove:hover,
.module-remove.dragover {
	background-color: #F15656;
}
</style>
</head>

<body>
            
<!-- 演示区域 -->
<div class="container">
	<ul id="module" class="module-ul">	
        <li class="module-li" draggable="true" data-url="https://i0.hippopx.com/photos/320/918/427/sky-clouds-sunlight-dark-preview.jpg">
            <img class="module-img" src="https://i0.hippopx.com/photos/320/918/427/sky-clouds-sunlight-dark-thumb.jpg" height="96" alt="模块占位图1">
        </li>
	    <li class="module-li" draggable="true" data-url="https://i0.hippopx.com/photos/477/768/839/swimmer-sport-swim-water-preview.jpg">
            <img class="module-img" src="https://i0.hippopx.com/photos/477/768/839/swimmer-sport-swim-water-thumb.jpg" height="128" alt="模块占位图2">
        </li>
        <li class="module-li" draggable="true" data-url="https://i0.hippopx.com/photos/20/987/594/woman-young-rain-pond-preview.jpg">
            <img class="module-img" src="https://i0.hippopx.com/photos/20/987/594/woman-young-rain-pond-thumb.jpg" height="96" alt="模块占位图3">
        </li>
        <li class="module-li" draggable="true" data-url="https://i0.hippopx.com/photos/740/837/204/spices-cinnamon-sticks-odor-aroma-preview.jpg">
            <img class="module-img" src="https://i0.hippopx.com/photos/740/837/204/spices-cinnamon-sticks-odor-aroma-thumb.jpg" height="86" alt="模块占位图4">
        </li>
	</ul>
    <div id="moduleRemove" class="module-remove"><span class="module-remove-icon">×</span></div>
    <div id="moduleBody" class="module-body">
    	<div id="moduleStage" class="module-stage">
        	<div id="modulePlaHd" class="module-placeholder"></div>
        </div>
    </div>
</div>
<!-- 演示区域 结束 -->


<script src="http://apps.bdimg.com/libs/jquery/1.9.0/jquery.min.js"></script>
<script>
var moduleDrag = (function() {
	// 模块操作类名，标记用
	var CL_MODULE = 'jsDragModule';
	// 状态类名
	var CL_DRAGENTER = 'dragenter';
	var CL_DRAGOVER = 'dragover';
	var CL_DRAGSTART = 'dragstart';
	
	return  {
		el: {},
		store: {},
		events: function() {
			var self = this;
			// 拖拽相关的事件
			var el = self.el;
			// 元素
			var module = el.module, stage = el.stage;
			// 拖拽模块
			var modlder = el.modlder;
			
			var lis = module.find('li'), elDrag = null;

			// 左侧拖拽
			module.delegate('li', {
				dragstart: function(event) {
					var li = $(this);
					// 标记当前拖拽元素
			        elDrag = li;
					event.originalEvent.dataTransfer.setData('text/plain', 'for firefox');
				},
				dragend: function(event) {
					// 拖拽结束
			        elDrag = null;
					event.preventDefault();
				}
			});

			// 经过占位模块元素
			modlder.on({
				dragover: function(event) {
					event.preventDefault();
				},
				dragenter: function() {
					modlder.addClass(CL_DRAGENTER);
				},
				drop: function(event) {
					var url = elDrag && elDrag.attr('data-url');
					if (url) {
						// 从左侧拖动到主内容区域时候放下的回调
						// 在本例子中，就是插入大图
						modlder.empty().hide();
						// 在占位符元素的前面插入模块
						self.insertModule('<img src="'+ url +'" height="'+ (elDrag.find('img').height() * 4) +'">', modlder, 'before');
					}
					modlder.removeClass(CL_DRAGENTER);
					
					event.preventDefault();
				}
			});

			// 模块响应左侧的拖拽以及其他模块的拖拽
			var body = el.body;

			// 实时记录鼠标的位置，方便判断鼠标当前在鼠标的上半区还是下半区
			var pos = {};
			document.addEventListener("dragover", function(event){
			    pos.y = event.pageY;
			}, false);

			body.delegate('.' + CL_MODULE, {
				dragover: function(event) {
					// 触发的节奏是：歘歘歘
					var current = $(this);
					// 1. 求得模块的水平中心位置
					var centerY = current.offset().top + current.height() * 0.5;

					if (typeof pos.y != 'number' || this == elDrag[0]) {
						return;
					}

					if (!elDrag) {
						return;
					}
					// 上半区还是下半区
					if (pos.y <= centerY) {
						// 上
						// 如果拖拽的是li元素，认为是左侧列表
						if (elDrag.is('li')) {
							modlder.show().insertBefore(current);
						} else if (elDrag.hasClass(CL_MODULE)) {
							var prev = current.prev();
							if (prev.length && prev.hasClass(CL_MODULE)) {
								if (prev[0] !== elDrag[0]) {
									elDrag.insertBefore(current);
								}
							} else {
								elDrag.insertBefore(current);
							}				
						}
					} else {
						if (elDrag.is('li')) {
							modlder.show().insertAfter(current);
						} else if (elDrag.hasClass(CL_MODULE)) {
							// 当拖拽位置在下半区的时候
							// 同时，拖拽元素不是检测元素的下一个的时候
							// 执行位置调整
							var next = current.next();
							// 如果后面没元素，或者元素不是模块元素
							if (next.length && next.hasClass(CL_MODULE)) {
								if (next[0] !== elDrag[0]) {
									// 如果后面的元素不是拖动的元素，位置变化
									elDrag.insertAfter(current);
								}
							} else {
								elDrag.insertAfter(current);
							}
						}
					}
					event.preventDefault();
				},
				dragenter: function(event) {
					// 触发的节奏是： 歘  歘  歘
					event.preventDefault();
				},
				// 模块间的拖来拖去
				dragstart: function(event) {
					elDrag = $(this).addClass(CL_DRAGSTART);

					// 右侧删除
					el.remove.addClass(CL_DRAGENTER);
					
					event.originalEvent.dataTransfer.setData('text/plain', 'for firefox');
				},
				dragend: function(event) {
					/*拖拽结束*/
					$(this).removeClass(CL_DRAGSTART);
					elDrag = null;

					// 右侧删除
					el.remove.removeClass(CL_DRAGENTER);
					
					event.preventDefault();
				}
			});
			
			// 拖动到删除元素时候
			el.remove.on({
				dragenter: function() {
					$(this).addClass(CL_DRAGOVER);
				},
				dragover: function(event) {
					event.preventDefault();
				},
				dragout: function() {
					$(this).removeClass(CL_DRAGOVER);
				},
				drop: function(event) {
					// 删除
					if (elDrag && elDrag.hasClass(CL_MODULE)) {
						var id = elDrag.attr('id');
						if (id) {
							// 删除该模块存储数据
							delete self.store[id];
						}
						
						elDrag.remove();

						if ($('.' + CL_MODULE).length == 0) {
							modlder.show();
						}
					}

					// 功成身退
					$(this).removeClass(CL_DRAGENTER).removeClass(CL_DRAGOVER);
					
					event.preventDefault();
				}
			});
		},
		
		insertModule: function(html) {
			var self = this;
			// 创建随机id
			var id = ('id_' + Math.random()).replace('0.', '');
			//  给模块HTML穿上一件可拖拽的外衣
			var htmlWrap = '<div id="'+ id +'" class="'+ CL_MODULE +' module-drag" draggable="true">'
			+ html
			+ '</div>';

			// 缓存颜色
			var module = $(htmlWrap);

			// 是否已经有过此模块
			var isModuled = false;
			$.each(self.store, function(id, obj) {
				// 如果HTML内容一样，认为是同一模块
				if (obj && obj.html && obj.html == html) {
					isModuled = true;
					return false;
				}
			});

			if (isModuled && window.console) {
				alert('此模块已经被选择');
				return self;
			}
			
			// 存储
			self.store[id] = {
				html: html
			};
			
			// 占位符前面插入内容
			self.el.modlder.before(module);

			return self;
		},
		
		init: function() {
			var self = this;

			// 一些元素
			self.el = $.extend(self.el, {
				module: $('#module'),
				remove: $('#moduleRemove'),
				body: $('#moduleBody'),
				stage: $('#moduleStage'),
				modlder: $('#modulePlaHd')
			});
			
			self.events();
		}
	};	
})();

moduleDrag.init();
</script>

</body>
</html>

 

夕空
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
jQuery批量图片拖动排序和查看
09-05
基于jQuery的图片列表拖动排序插件(支持多选)，支持选择多张图片拖动排序，支持动态添加和批量删除，支持查看图片。
拖拽效果，拖拽排序，拖拽删除及外部图片拖拽插入页面
long_boxiaweizhu的博客
05-16 708
<head> <meta charset="utf-8"> <title>拖拽</title> <style> * { margin: 0; padding: 0; } ul { display: flex; list-style: none; width: 600px; m...
如何在Vue3中实现列表项的拖拽排序功能
最新发布
有我更精彩的博客
06-19 1257
拖拽排序功能允许用户通过拖拽操作来改变列表项的位置。捕捉用户的拖拽事件。更新列表的排序。幸运的是，我们不需要从头开始构建这个功能，有很多现成的库可以帮助我们实现它。在这篇文章中，我们将使用库来方便地实现列表项的拖拽排序。
vue3+vuedraggable的上传图片后 图片列表的拖拽排序
2301_76607997的博客
09-07 524
技术：vue3 + vuedraggable(4.1.0) + element plus的el-upload 代码如下。问题：实现图片列表的拖拽排序 更方便调整图片位置--如果用的v2我文章也有。
vue 和element上传图片以及进行拖拽图片排序。
weixin_47509924的博客
02-23 1527
上传图片以及拖拽排序
vue中使用vuedraggable实现图片的拖拽排序以及预览等功能
dekuyu blog
05-09 2401
【代码】vue中使用vuedraggable实现图片的拖拽排序以及预览等功能。
Android 个人相册图片拖拽排序
Kawa103的博客
11-15 2416
效果图如下： 代码1：具体核心代码： private ItemTouchHelper helper = new ItemTouchHelper(new ItemTouchHelper.Callback() { @Override public int getMovementFlags(RecyclerView recyclerView, RecyclerV...
仿微信朋友圈图片拖拽排序
10-12
"仿微信朋友圈图片拖拽排序"是一个针对微信小程序的特色功能实现，它允许用户通过拖拽来调整朋友圈图片的顺序，同时还提供了图片的上传、删除以及相应的动画效果。这个功能在实际应用中能够极大地提升用户体验，使得...
jQuery图片上传拖拽排序代码
07-24
在本文中，我们将深入探讨如何使用jQuery和Vue.js来实现一个功能丰富的图片上传与拖拽排序功能，特别是在HTML表格中的应用。这个功能可以极大地提升用户体验，使得用户能够方便地管理和组织上传的图片。 首先，...
jquery图片拖拽排序ajax更新排序顺序
06-19
综上所述，实现“jquery图片拖拽排序ajax更新排序顺序”的主要步骤包括使用jQuery的`.draggable()`和`.droppable()`方法实现拖拽排序，利用CSS和jQuery处理删除图标的显示与隐藏，以及通过Ajax请求和服务器端处理来...
jQuery拖动图片自定义排序代码
06-24
5. **鼠标拖拽事件处理**：使用`event.clientX`和`event.clientY`获取鼠标位置，与图片元素的坐标进行比较，计算出拖动的距离，然后通过CSS的`transform`属性改变图片的位置。 6. **图片排序**：在拖动过程中，需要...
dragsort图片拖动排序demo
11-27
该demo演示了如何使用dragsort.js来对图片列表进行拖动排序并且在每次拖动完成后均会输出当前图片列表顺序且可执行其他操作
js实现拖拽删除添加功能
05-14
纯js实现拖拽删除添加功能，有示例，简单实用
JS实现图片拖拽排序（亲测可用）
03-07
前端用于鼠标拖拽排序，亲测可用，如果需要动态加载数据，请设置延迟加载
加载商品图片控件、长按可拖动、右上角删除按钮
03-11
由于项目涉及电商，经常会遇到商品选取、拖动位置、删除商品图片等需求 所以自定义了此控件，废话不多说，代码量很少 一看就懂 此项目采用的开发工具了AndroidStudio http://blog.csdn.net/qq331710168/article/details/44201699
WeChatDemo:微信朋友圈,发表微信,朋友圈拖动删除图片,拖拽删除图片，拖拽排序
05-19
本篇将深入解析如何利用Objective-C编程语言，实现“微信Demo”中的朋友圈照片拖动删除及拖拽排序功能。这一功能为用户提供了直观且便捷的操作体验，尤其在处理多张图片时显得尤为重要。 首先，我们需要明确项目的...
关于uniapp中的拖拽图片排序，类似发布朋友圈功能的组件学习
a99101的博客
02-21 1370
仅供学习记录 和帮作者推广一下他的插件如果侵权请联系我进行文章删除。
vue实现图片拖动排序
sinat_41200024的博客
09-21 2464
vue实现拖动图片排序
vue后台Element-ui实现图片上传后拖拽排序
qq_61869009的博客
10-03 1653
在组件下面先局部引入拖拽组件vuedraggable，import draggable from 'vuedraggable';3.定义组件接收参数，上传图最大值，宽，高，圆角，回显数组，然后监听当前数组值变化再传递给父组件。项目基于vue2，element2，vuedraggable2，话不多说直接开整。直接在项目components下面创建组件名为uploadImg。2.使用element的upload组件，创建mystyle对样式穿透动态修改。4.在父组件使用，按钮提交作校验成功拿到数组数据。
HTML5拖拽API详解：实现拖放功能
- `clearData(format)`：删除指定类型的数据，`format`可以是多种类型，包括文件、HTML和图片等。 - 属性成员： - `effectAllowed`：设定或获取可执行的操作类型，如“copy”、“move”或“link”。 此外，还有...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值