easyui自定义拖动排序

117 阅读1分钟
/*二级菜单上下拖动*/
	function dragMenu(){
	var dragy = 0;
//		var clientY = 0;
	 var indicator = $('<div class="indicator"></div>').appendTo('.sub_pre_menu_box');
	 $('.addMenuBox2').draggable({
           revert:true,
           cursor:'move',
           proxy: function(source){
       		var p = $('<div id="potcursor"></div>');
       		p.html($(source).html()).appendTo('body');
       		$(this).addClass('movedefault');
       		return p;
       	},
       	onStopDrag:function(e){
           	$('.addMenuBox2').removeClass('movedefault');
//               	clientY= e.clientY;
       	},
       	onStartDrag:function(e){
       		dragy=e.clientY;
       	},
       }).droppable({
           accept:'.addMenuBox2',
           onDragOver:function(e,source){
               indicator.css({
                   display:'block',
                   left:$(this).offset().left-40,
                   top:$(this).offset().top+$(this).outerHeight()-20
               });
           },
           onDragLeave:function(e,source){
        	   var clientY = $(this).offset().top;/*获取高度*/
               	if(clientY>dragy){
                    $(source).insertAfter(this);
               	}else{
                    $(source).insertBefore(this);
               	}
               indicator.show();
           },
           onDrop:function(e,source){
           	$('.addMenuBox2').removeClass('movedefault');
               indicator.hide();
           }
       });
}
/*一级菜单左右拖动*/
	function dragMenu2(){
	var dragx=0;
	 var indicator2 = $('<div class="indicator2"></div>').appendTo('.menuList');
	 $('.addMenuBox').draggable({
           revert:true,
           cursor:'move',
           proxy: function(source){
       		var p = $('<div id="potcursor2"></div>');
       		p.html($(source).html()).appendTo('body');
       		return p;
       	},
       	onStartDrag:function(e){
       		dragx=$(this).offset().left;/*获取横轴位置*/
       	},
        onStopDrag:function(e){
    	    $('.addMenuBox').css("left","auto");
           	if(e.clientX>dragx){
           		$(e.target).closest("li").insertBefore(this);
           	}else{
           		$(e.target).closest("li").insertAfter(this);
           	}
            indicator2.hide();
        }
       }).droppable({
           accept:'.addMenuBox',
           onDragOver:function(e,source){
               indicator2.css({
                   display:'block',
               });
           },
           onDragLeave:function(e,source){
               indicator2.show();
           }
       });
}
using(["draggable","droppable"], function() {
dragMenu();
dragMenu2();
});