利用jQuery实现模块编辑器拖拽排序代码



11 42 15



特效描述:利用jQuery实现 模块 编辑器 拖拽排序 代码,利用jQuery实现模块编辑器拖拽排序代码

代码结构

1. 引入CSS

<link href="https://cdn.bootcss.com/bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

2. 引入JS

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-sortable-min.js"></script>

3. HTML代码

<div class="wrap">
	<h3 style=" text-align:center;">简易自定义表单及拖拽排序</h3>
	<div  class="addbtns">
		<button type="button" class="add btn btn-warning" data-target="_oneline"><span class="fa fa-plus"></span> 单行输入框</button><br/>
		<button type="button" class="add btn btn-warning" data-target="_multiline" ><span class="fa fa-plus"></span> 多行输入域</button><br/>
		<button type="button" class="add btn btn-warning" data-target="_file" ><span class="fa fa-plus"></span> 附 件</button>
	</div>
	<!-- 控件源代码 -->
	<ul class="originlist" style="display:none;">
		<li class="_oneline">
			<span class="delete fa fa-trash-o"> 删除</span>
			<div class="customeritem">
				<span class="key" data-title="标题">标题</span> 
				<span class="fa fa-edit"></span>
				<div class="value input" data-type="text" data-placeholder="请填写标题">请填写标题</div>
			</div>
		</li>
		<li class="_multiline">
			<span class="delete fa fa-trash-o">删除</span> 
			<div class="customeritem">
				<span class="key" data-title="说明">说明</span> 
				<span class="fa fa-edit"></span>
				<div class="value textarea" data-type="textarea" data-placeholder="请填写说明">请填写说明</div>
			</div>
		</li>
		<li class="_file">
			<span class="delete fa fa-trash-o">删除</span>
			<div class="customeritem">
				<span class="key" data-title="附件">附件</span> 
				<span class="fa fa-edit"></span>
				<div class="value file" data-type="file" data-placeholder="请选择附件"><span class="fa fa-plus"></span></div>
			</div>
		</li>
	</ul>
	<ul class="customerlist">
		<p class="tips">请点击右侧按钮,添加自定义控件</p>
	</ul>
	<button type="button" class="showjson  btn btn-block btn-success" ><span class="fa fa-save"></span> 保 存</button>
	<div class="console" >
	</div>
</div>
<script>
	$(function () {
		$('.add').on('click', function () {
			var that = $(this);
			var target = that.data('target');
			$('.customerlist').append('<li> ' + $('.originlist>.' + target).html() + '</li>');
			$("ul.customerlist").sortable();
			//off 先取消绑定,否则会调用多次
			$('.customeritem').off('click').on('click', modifytitle);
			$('.delete').off('click').on('click',deleteitem);
			$('.tips').hide();
		})
		$('.showjson').on('click',function(){
			if($('.customerlist .customeritem').length==0) return;
			var temp=[];
			var t;
			$('.customerlist .customeritem').each(function(index,element){
				t = $(this).children();
				temp.push({"type":$(t[2]).data('type'),"title":$(t[0]).data('title')});
			})
			console.log(temp);
			$('.console').html(JSON.stringify(temp))
		})
	})
	function modifytitle(e) {
		var that = $(this);
		var key = that.find('.key').eq(0);
		var value = that.find('.value').eq(0);
		var newtitle = prompt("请填写标题", key.html());
		if ($.trim(newtitle).length > 8) {
			alert('标题长度不能超过8位');
		}else if ($.trim(newtitle).length > 0) {
			key.data('title',newtitle).html(newtitle) ;
			if(value.data('type')!='file') value.data('placeholder',newtitle).html( '请填写' + newtitle);
		}else{}
	}
	function deleteitem() {
		if(confirm('确定要删除吗?')){
			var that = $(this);
			var parent = that.parent();
			parent.remove();
			if($('.customerlist .customeritem').length==0) $('.tips').show();
		}
	}
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>



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


热门标签: 拖动 拖拽 拖动插件 拖拽插件 弹出层拖动 窗口 弹出 弹窗 弹出层 提示框 对话框 遮罩 遮罩层 弹窗插件 滑动星星打分 切换按钮 表单 表单美化 表单插件 表单美化插件 其他 拖动排序 拖拽排序 提示框/弹出层 文本框 text文本框 添加删除 添加标签 编辑器

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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