jquery-ui 拖动列表 与 拖拽

一、列表拖动——Sortable Widget

代码：

define(["jqueryUI","jquery"],function() {	
	
var dragInit = {
	initVisualModuleSortAble:function(){
 <span style="white-space:pre">	</span>    //用于拖动的dom，可以是多个拖动的dom的父节点
	    $('#body,#head,#foot').sortable({
            placeholder : "md_move_border",//拖动某个dom之后残留在原位置的class样式名称，否则显示空白
            items : ".bk_mv_md:not(.dead)",//当到达边缘时页面会滚动
            stop : function(event, ui){}); //拖动停止时事件
	}

页面加载时初始化这个方法就可以了。 具体的API详见  http://www.runoob.com/jqueryui/api-sortable.html

二、拖拽组件到拖动列表——Draggable Widget

代码：

	initIconDragAble:function(){
		  $(".mobile_md_cat_list").find(".body").each(function() { //遍历每个按钮icon设置拖拽功能
	            $(this).draggable({
	                connectToSortable : "#body",  //目标区域列表div的dom
	                helper : "clone", //拖拽时为原dom按钮的clone，而不是直接拖拽原dom按钮
	                revert : "invalid", //当未拖入到指定目标区域时，回到原位置
	            });
	        });
	}

页面加载时初始化这个方法就可以了。 具体的API详见  http://www.runoob.com/jqueryui/api-draggable.html

注意：jquery-ui请使用1.11.1（包含）及以下版本，1.11.1以上在使用connectToSortable属性， 也就是从列表移动到另一个soatable中

会出现问题