_dragstartHandle: function(e){
var me = this,oe = e.originalEvent;
if(oe.dataTransfer){
oe.dataTransfer.setData('text', '');
}
me.$drag = $(e.currentTarget);
$('li',me.$el).removeClass('item-hover');
me.$drag.addClass('draging').siblings().addClass('no-draging');
},
_dragenterHandle: function(e){
var me = this;
me.$drop = $(e.currentTarget);
if(me.timer){clearTimeout(me.timer)} //事件控制
me.timer = setTimeout(function(){
if(me.$drag.attr('id') !== me.$drop.attr('id')){
me._createMask();
if(me.$drag.index()<me.$drop.index()) me.$drag.insertAfter(me.$drop);
else me.$drag.insertBefore(me.$drop);
}
}, 30);
},
_dragoverHandle: function(e){
var oe = e.originalEvent;
e.preventDefault();
return false;
},
_dropHandle: function(e){
e.preventDefault();
e.stopPropagation();
return false;
},
//拖动结束
_dragendHandle: function(e){
var me = this;
me.$mask && me.$mask.remove();
setTimeout(function(){
$('li', me.$el).removeClass('draging no-draging');
},30);
},
//创建遮罩
_createMask: function(){
var me = this,$mask = me.$mask = $('<div class="drag-mask"></div>');
$mask.css({
position: 'absolute',
width: me.$drop.outerWidth(),//new
height: me.$drop.outerHeight(),//new
left: me.$drop.position().left,
top: me.$drop.position().top+me.$el.scrollTop(),//new
backgroundColor: '#fff'
});
$mask.on({
'drop': me._dropHandle,
'dragover': me._dragoverHandle
});
this.$el.find('.drag-mask').remove();
this.$el.append($mask);
}
};
win.Drag = Drag;
})(window);
踩得坑：
1、关于dataTransfer, 事件对象e中是没有该属性的，要找该属性应该通过e.originalEvent.dataTransfer中去找。
2、兼容火狐浏览器。如果不这样操作，火狐下是无法运行的：
if(oe.dataTransfer){
oe.dataTransfer.setData('text', '');
}3、dragover事件每隔 350 毫秒会被触发一次。
4、dragstart、dragenter、dragend事件通过jquery绑定，事件处理函数中的this指向最外层对象，例如上面的new Drag()；dragover、drop事件通过jquery绑定，事件处理函数中的this指向被绑定的html标签。
5、jquery获取包括padding的宽度调用：$el.outerWidth()和$el.outerHeight() 。
6、只有属性draggable=”true”的元素才可以被拖动。
