{
    分享网正式开通,我们为大家提供免费资源,欢迎大家踊跃投稿!

jQuery鼠标上下拖动div排序代码

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>


在线预览
资源均来自第三方,谨慎下载,前往第三方网站下载


米微资源分享网 , 版权所有丨本站资源仅限于学习研究,严禁从事商业或者非法活动!丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:jQuery鼠标上下拖动div排序代码
喜欢 ()分享 (0)