Connect_logo_6.png 退出
前端視頻教程 小程序 眾籌源碼 python 商城源碼 商城模板 響應式模板 中文模板 手機模板 企業源碼
充值

jQuery鼠標上下拖動div排序代碼

作者/代碼整理:  (轉載請附加本文地址,帶有“懶人原生”字樣的謝絕轉載) 發布日期:2018-10-08
jQuery鼠標上下拖動div排序代碼、鼠標拖動層改變排列順序,div左上角還有按鈕操作,點擊只是彈窗提示效果。


js代碼

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="Sortable.min.js"></script>
<script type="text/javascript" src="moduleSet.min.js"></script>
<script type="text/javascript">
	// 調用

	$(".js_module_1").moduleSet({
		button:[
			{text:'編輯',callback:function(){alert('編輯')},iconfont:'&#xe648;'},
			{text:'刪除',callback:function(){alert('刪除')},iconfont:'&#xe613;'},
		],
	})
	$(".js_module_2").moduleSet({
		button:[
			{text:'編輯',callback:function(){alert('編輯2')},iconfont:'&#xe648;'},
			{text:'美化',callback:function(){alert('美化2')},iconfont:'&#xe63f;'},
		],
	})

	$(".js_module_3").moduleSet({
		button:[
			{text:'編輯',callback:function(){alert('編輯3')},iconfont:'&#xe648;'},
			{text:'美化',callback:function(){alert('美化3')},iconfont:'&#xe63f;'},
		],
	})

	// 排序
	var container = document.getElementById("container");
	var sort = Sortable.create(container, {
	  animation: 150, // ms, animation speed moving items when sorting, `0` — without animation
	  handle: ".module1", // Restricts sort start click/touch to the specified element
	  draggable: ".module1", // Specifies which items inside the element should be sortable
	  onUpdate: function (evt/**Event*/){
		alert(11)
		 var item = evt.item; // the current dragged HTMLElement
	  }
	});
</script>

极速快三全天人工计划