利用jQuery實現模塊編輯器拖拽排序代碼



23 91 31



特效描述:利用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

加群請備注:從官網了解到

老夫子电子 ios挂机能赚钱软件哪个好 靠斗地主能赚钱吗 怎么用刷课赚钱 7星彩开奖结果查询18137 发抖因小视频怎么赚钱 568彩票2019年最新 彩聊计划软件下载手机版 内蒙古十一选五跨度走势图带连线 四人麻将游戏下载 江苏十一选五任五遗漏号 上海天天彩选四今天的开奖公告 广西十一选五手机版 江苏快3开奖结果万能码 上海快3开奖走势图一定牛 网上购买彩票怎么买 微信麻将游戏