jQuery可视化表单拖拽插件



如需定制开发(网站开发、二次开发)在线咨询,请点击>> QQ:753511799

12 45 16



特效描述:可视化 表单拖拽。jQuery可视化表单拖拽实例下载是一款用户根据右边控件进行拖拉拽,可以直接添加到中间区域并进行排序,一行多列等。

代码结构

1. 引入JS

<script src="js/jquery.min.js"></script>

2. HTML代码

<div class="wrap">
	<div class="left">
		<div data-attr="<span class='drag_link'>+</span><input type='text'>">输入框</div>
		<div data-attr="<span class='drag_link'>+</span><input type='date'>">日期框</div>
		<div data-attr="<span class='drag_link'>+</span><span>只读文本</span>">只读文本</div>
		<div data-attr="<span class='drag_link'>+</span><textarea></textarea>">多行文本</div>
	</div>
	<div class="center"></div>
	<div class="right">右边</div>
</div>
<script>
	// 判断是否点击了
	var isClick = false;
	// 克隆的控件
	var downClickClone;
	// 添加到列表时的横纵坐标
	var centerAppendIndexX = 0;
	var centerAppendIndexY = 0;
	//控件是否在指定的容器内
	function isInclude(x, y, includeBox) {
		// x:操作对象的宽度
		// y:操作对象的高度
		// includeBox:所在区域对象
		if (x > includeBox.offsetLeft &&
			y > includeBox.offsetTop &&
			x < includeBox.offsetLeft + includeBox.offsetWidth &&
			y < includeBox.offsetTop + includeBox.offsetHeight)
			return true;
		return false;
	}
	//初始化提示线颜色
	function InitializesLineStyles() {
		if ($('.centerActiveLine').length) $('.centerActiveLine').remove();
		if ($('.centerActiveLineleft').length) $('.centerActiveLineleft').remove();
	}
	/** showCenterAcitvieDrag(content, e, flag, status)添加节点(提示线/控件)
		content:需要添加的内容
		e:表示操作对象
		flag:是添加控件还是提示线
		status:是否从左边拖拽的
	*/
	function showCenterAcitvieDrag(content, e, flag, status) {
		var newContent = `<div class='centerActiveLineleft'></div>`
		if (flag) newContent = content.eq(0).is('.centerBoxMax') ? content.eq(0).children().html() : content.eq(0).html();
		activeBoxTop = status ? e.clientY + $('.center').scrollTop() : parseFloat($('.activeCenterBox').css('top'))
		if (($('.activeCenterBox').length || status) && isInclude(e.clientX, e.clientY, $('.center')[0])) {
			var child = $(".center>div:not(.activeCenterBox)");
			centerAppendIndexX = 0;
			centerAppendIndexY = 0;
			for (let i = 0; i < child.length; i++) {
				InitializesLineStyles();
				// 鼠标所在位置与标签所在位置进行判断
				if (activeBoxTop < child.eq(i)[0].offsetTop + child.eq(i)[0].offsetHeight / 1.5) {
					var childSub = child.eq(i).children(':not(.activeCenterBox)');
					for (let j = 0; j < childSub.length; j++) {
						centerAppendIndexY = 0;
						InitializesLineStyles();
						//判断是否拖动到了结尾
						var tempj = j == 0 ? tempj = 0 : childSub.eq(j - 1).offset().left;
						if (e.clientX <= childSub.eq(j).offset().left && tempj <= e.clientX) {
							if (flag) {
								childSub.eq(j).before(`<div class='centerBox'>${newContent}</div>`);
								$('.activeCenterBox').remove();
							} else {
								childSub.eq(j).before(newContent);
								centerAppendIndexY = j;
							}
							break;
						} else if (e.clientX >= childSub.eq(j).offset().left + childSub.eq(j).width() && j == childSub.length - 1) {
							if (flag) {
								childSub.eq(j).after(`<div class='centerBox'>${newContent}</div>`);
								$('.activeCenterBox').remove();
							} else {
								childSub.eq(j).after(newContent);
								centerAppendIndexY = j + 1;
							}
						} else if (e.clientX > childSub.eq(j).offset().left && e.clientX < childSub.eq(j).offset().left + childSub.eq(j).width()) {
							if (flag && content.is('.centerBox')) {
								child.eq(i).before(`<div class='centerBoxMax'>${content[0].outerHTML}</div>`);
								content.remove();
							} else {
								child.eq(i).before(content);
								centerAppendIndexY = -1;
							}
							break;
						}
					}
					centerAppendIndexX = i;
					break;
				} else if (i == child.length - 1) {
					if (flag && content.is('.centerBox')) {
						$('.center').append(`<div class='centerBoxMax'>${content[0].outerHTML}</div>`);
						content.remove();
					} else {
						$('.center').append(content);
						centerAppendIndexX = i + 1;
						centerAppendIndexY = -1;
					}
					break;
				}
			}
		}
	}
	// 鼠标按下事件
	function down(e) {
		// 初始化克隆的文件
		$(".dragMove").remove();
		if (isInclude(e.clientX, e.clientY, $('body')[0])) {
			isClick = true;
			//克隆点击的触发节点
			downClickClone = $(this).clone(true);
			//添加到htm结构中
			$("body").append(downClickClone);
			downClickClone.addClass('dragMove');
			// 克隆文件所在的位置
			downClickClone.css({
				'left': e.clientX - (downClickClone.width() / 2) + 'px',
				'top': e.clientY - (downClickClone.height()) + 'px'
			});
		}
	}
	// 目标区域的控件鼠标按下
	function centerDown(e) {
		// 初始化选中的样式
		$('.activeCenterBox').removeClass('activeCenterBox');
		// 判断是从多行里选择的还是单行
		if ($(this).parent().parent().children().length > 1) {
			$(this).parent().addClass("activeCenterBox");
		} else {
			$(this).parent().parent().addClass("activeCenterBox");
		}
	}
	//鼠标移动事件
	function move(e) {
		var content = `<div class='centerActiveLine'></div>`;
		// 当已克隆出控件后
		if (isClick) {
			$(".dragMove").css({
					'left': e.clientX - $(".dragMove").width() / 2,
					'top': e.clientY - $(".dragMove").height() / 2
				})
				//添加提示线
			showCenterAcitvieDrag(content, e, false, true);
		}
		//移动控件跟随鼠标移动
		if ($('.activeCenterBox').length) {
			$('.activeCenterBox').css({
					'left': e.clientX - $('.center')[0].offsetLeft,
					'top': e.clientY + $('.center').scrollTop() - $('.center')[0].offsetTop - parseFloat($('.center').css('padding'))
				})
				//新控件在目标区域创建一个新的
			showCenterAcitvieDrag(content, e, false, false);
		}
	}
	function up(e) {
		//移出红色线条提示
		InitializesLineStyles();
		//新控件在目标区域创建一个新的
		if (isClick && isInclude(e.clientX, e.clientY, $('.center')[0])) {
			var dataAttrValueTag = `<div class='centerBoxMax'><div class='centerBox'>${downClickClone.attr('data-attr')}</div></div>`;
			//添加新控件
			if (!$(".centerBox").length) {
				$(".center").append(dataAttrValueTag)
			} else {
				if (centerAppendIndexX != $('.centerBoxMax').length + 1) {
					if (centerAppendIndexY != -1) {
						dataAttrValueTag = `<div class='centerBox'>${downClickClone.attr('data-attr')}</div>`;
						if (centerAppendIndexY != $(".centerBoxMax").eq(centerAppendIndexX).children().length) {
							$(".centerBoxMax").eq(centerAppendIndexX).children().eq(centerAppendIndexY).before(dataAttrValueTag);
						} else {
							$(".centerBoxMax").eq(centerAppendIndexX).children().eq(centerAppendIndexY - 1).after(dataAttrValueTag);
						}
					} else {
						$(".centerBoxMax").eq(centerAppendIndexX - 1).before(dataAttrValueTag)
					}
				} else {
					$(".center").append(dataAttrValueTag);
				}
			}
			isClick = false;
		}
		//已有的控件在目标区域进行移动
		var content = $('.activeCenterBox');
		showCenterAcitvieDrag(content, e, true, false);
		// 移出克隆控件
		$(".dragMove").remove();
		if ($('.activeCenterBox').length) $('.activeCenterBox').removeClass('activeCenterBox');
	}
	$(document).ready(function() {
		//监听控件
		$(".left>div").on('mousedown', down)
		$("body").on('mousemove', move);
		$("body").on('mouseup', up);
		$("html").on("mousedown", ".drag_link", centerDown);
		// 选中组件
		$('html').on('click', '.centerBox', function() {
			$('.centerBox').removeClass('centerboxChecked');
			$(this).addClass('centerboxChecked');
			$('.right').text('');
			$('.right').append(`<div>${$(this)[0].innerHTML}</div>`);
		});
		// 双击删除当前组件
		$('html').on('dblclick', '.centerBox', function() {
			if (confirm('是否删除该组件?')) {
				if ($(this).parent().children().length > 1) {
					$(this).remove();
				} else {
					$(this).parent().remove();
				}
			}
		})
	})
</script>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册



×
×
51前端

注册

×
绑定手机

请绑定手机号,在继续操作

×
单次下载支付

应付金额:279

支付完成后,回到下载页面,在进行下载

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到