jQuery-ui源代码重点难点分析
本文以jquery-ui sortable排序功能插件为例分析jquery-ui源代码重点难点。
jquery-ui-sortable插件非常复杂深奥，本来是针对鼠标操作设计的，在手机运行无效，因为手机没有mouse事件，更没有drag事件。
但增加一个jquery-ui-touch-punch.js文件之后在手机运行也有效，touch有效，原理在于sortable源代码不是针对鼠标drag and drop设计的，而是针对mouse事件中的位置数据设计的，底层有复杂的算法，touch事件数据也包含位置数据，因此sortable能兼容touch，很强大。
sortable插件的调用方式是$().sortable(opts)，那么sortable()函数就是入口初始化函数，我们从这个入口初始化函数源代码开始分析。
$.widget.bridge = function( name, object ) {
var fullName = object.prototype.widgetFullName || name;
$.fn[ name ] = function( options ) { // 此即为sortable()函数代码
this.each(function() { // this是$()元素集合，一般只有一个节点，$().each()就是循环一次，元素就是container元素。
var instance = $.data( this, fullName ); // this是元素集合里面每一个元素对象，这是从元素对象取比如ui-sortable属性值是一个实例
if ( instance ) {
instance.option( options || {} );
if ( instance._init ) {
instance._init();
}
} else {
$.data( this, fullName, new object( options, this ) ); // 如果没有就建一个实例保存到元素属性中
constructor = $[ namespace ][ name ] = function( options, element ) { // object代码
// allow instantiation without "new" keyword
if ( !this._createWidget ) {
return new constructor( options, element );
}
// allow instantiation without initializing for simple inheritance
// must use "new" keyword (the code above always passes args)
if ( arguments.length ) {
this._createWidget( options, element );
$.Widget.prototype = {
_createWidget: function( options, element ) {
this._create(); // 调sortable插件的内置方法初始化sortable插件，由于加了一层封装，用apply方式调用
var sortable = $.widget("ui.sortable", $.ui.mouse, { // sortable插件的定义
_create: function() {
this.refresh();//根据已经存在的网页中的列表创建一套items[]
this._mouseInit(); //调用mouse插件的通用初始化方法，这是juqery-ui-touch修改之后的init代码
$.ui.mouse.prototype._mouseInit=function(){
var _this=this;
_this.element.bind("touchstart",$.proxy(_this,"_touchStart"))
.bind("touchmove",$.proxy(_this,"_touchMove"))
.bind("touchend",$.proxy(_this,"_touchEnd"));
oldMouseInit.call(_this);
}；
}；
this._trigger( "create", null, this._getCreateEventData() );
this._init(); // 空函数
}
sortable入口函数就是创建一个实例保存在container元素属性中，先调用通用插件widget代码创建实例，再调用sortable插件的初始化方法，sortable插件初始化方法
创建items[]保存在sortable实例中，执行mouse初始化代码，如果执行了jquery-ui-touch-punch.js，mouse初始化代码被jquery-ui-touch修改了，就是绑定touch事件，touch事件会转换为mouse事件。
因此执行$().sortable()之后，创建了sortable实例，进行了初始化，绑定了touch事件，当touch操作时，执行mouse事件绑定的handler实现拖拽功能。
下面来看sortable插件的重点函数代码：
var sortable = $.widget("ui.sortable", $.ui.mouse, { // sortable的内置方法都加了一层封装，用value.apply方式调用
_mouseDrag: function(event) { //拖拽时会连续执行多次，拖拽时处理网页样式变化，把placeholder插入到目标元素之前，sortable不修改items[]原数据
//Compute the helpers position
//当拖动一个元素时，其class增加helper成为helper，成为浮动元素，元素跟着拖动浮动，离开了列表，helper的意思就是预览让人能看见元素被拖动走了。
//placeholder是新建一个元素代替它占据在列表中的位置，就是被拖动元素在列表中的替身，当拖动元素时，placeholder元素就插入相应的位置，这样就能预览插入的效果
this.position = this._generatePosition(event); // 计算helper的位置，来自touch event x/y位置数据，拖动时位置不断变化，helper跟着拖动走
_generatePosition: function(event) {
event中有touch位置x/y，计算时涉及到父容器scroll，要把父容器scroll去掉简化处理，调插件传参scroll:false忽略scroll处理。
return {
top: (
pageY - // The absolute mouse position
this.offset.click.top - // Click offset (relative to the element)
this.offset.relative.top - // Only for relative positioned nodes: Relative offset from element to offset parent
this.offset.parent.top + // The offsetParent's offset without borders (offset + border)
( ( this.cssPosition === "fixed" ? -this.scrollParent.scrollTop() : ( scrollIsRootNode ? 0 : scroll.scrollTop() ) ))
),
left: (
pageX - // The absolute mouse position
this.offset.click.left - // Click offset (relative to the element)
this.offset.relative.left - // Only for relative positioned nodes: Relative offset from element to offset parent
this.offset.parent.left + // The offsetParent's offset without borders (offset + border)
( ( this.cssPosition === "fixed" ? -this.scrollParent.scrollLeft() : scrollIsRootNode ? 0 : scroll.scrollLeft() ))
)
};
}
//Rearrange，产生placeholder元素插入到touch位置
for (i = this.items.length - 1; i >= 0; i--) { //
intersection = this._intersectsWithPointer(item); // intersect是touch与元素重叠的意思
_intersectsWithPointer: function(item) {
var isOverElementHeight = (this.options.axis === "x") || this._isOverAxis(this.positionAbs.top + this.offset.click.top, item.top, item.height),
isOverElementWidth = (this.options.axis === "y") || this._isOverAxis(this.positionAbs.left + this.offset.click.left, item.left, item.width),
_isOverAxis: function( x, reference, size ) { // x-touch位置 reference-元素位置
return ( x >= reference ) && ( x < ( reference + size ) ); // 判断touch位置是否在元素中，在水平方向和垂直方向分别判断
}
isOverElement = isOverElementHeight && isOverElementWidth,
verticalDirection = this._getDragVerticalDirection(),
horizontalDirection = this._getDragHorizontalDirection();
return this.floating ?
( ((horizontalDirection && horizontalDirection === "right") || verticalDirection === "down") ? 2 : 1 )
: ( verticalDirection && (verticalDirection === "down" ? 2 : 1) );
if (!intersection) {
continue;
}
//如果item与touch重叠，要修改列表，把placeholder插入到item元素之前
this._rearrange(event, item);
_rearrange: function(event, i, a, hardRefresh) { // i是touch目标item元素
i.item[0].parentNode.insertBefore(this.placeholder[0], (this.direction === "down" ? i.item[0] : i.item[0].nextSibling));
//向上向左拖时direction=down，向下向右拖时direction=up，placeholder插入位置有可能是item之前，也有可能是item下一个元素之前
this._trigger("change", event, this._uiHash());
}
//Call callbacks
this._trigger("sort", event, this._uiHash()); //如果有绑定"sort"逻辑事件，则执行handler，实际上没有
}
_mouseStop: function(event, noPropagation) { // 单步看开始执行之前start/end元素已经交换了位置，是由drag过程处理的，stop只是善后处理
$.ui.ddmanager.drop(this, event); // debug看没有处理内容
that._clear(event);
_clear: function(event, noPropagation) {
this.placeholder.before(this.currentItem); // sortbale实例里面的placeholder对象的before方法
before: function() {
return domManip( this, arguments, function( elem ) {
if ( this.parentNode ) {
this.parentNode.insertBefore( elem, this ); // elm是helper(drag)元素，this是placeholder，把拖动的元素插入到placeholder位置，这也是整个sortable操作的最终目的，helper元素已经在网页中，insert只是移动位置，插入之后还要修改css样式(修改class即可)。
}
} );
}
function domManip( collection, args, callback, ignored ) { // dommanip非常复杂
callback.call( collection[ i ], node, i );
return collection;
}
this._trigger("update", event, this._uiHash());
this._trigger("beforeStop", event, this._uiHash());
this.placeholder[0].parentNode.removeChild(this.placeholder[0]); // 删除placeholder
this._trigger("stop", event, this._uiHash());
sortable处理网页在拖动时插入placeholder最后再把拖动的元素插入到placeholder位置。
sortable是根据鼠标的位置数据进行计算判断目标位置元素，所以也适用于touch触发，因为touch事件数据中含位置数据，只要把touch事件转换成mouse事件即可，
如果sortable是按drag target元素设计的，就没法适用于touch，因为touchend没有target元素，没法获取到target元素。
sortable插件代码非常复杂，很难控制，本人参考它的处理思路和算法，自己写了一个简化的sortable插件来实现touch触发排序，测试效果没问题：
因为用前端框架比如vue开发，touch拖动时无需处理拖拽效果（实际上鼠标操作时h5会自动产生拖拽效果），只需要在touchend时计算出target元素，有了start元素和end元素，只需要把原数组变换一下，框架会自动更新页面，无需写代码处理页面更新，而jquery-ui-sortable的功能就是在拖拽时更新页面效果，我不需要它这个功能，只需要参考它计算mouseup/touchend元素的算法，它的算法很复杂，简化一下测试结果也是可以的。
_touchEnd(e){
//console.log(e);
e.preventDefault();
e.stopPropagation();
var _this = this;
var intersection = false;
$("#tf_box > li").each(function(k,v){
//console.log(v.offsetLeft);
intersection = _this._intersectsWithTouch(e,v);
if (intersection) {
//item与touchend位置重叠，则item即为touchend/drag目标元素，修改原数组交换start/end元素
_this.endIndex = k;
_this.updateData(); // 修改原数组，页面会自动更新显示拖拽交换后的效果
}
});
},
_intersectsWithTouch(event,item) { // 计算touchend元素位置
var touchY = event.originalEvent.changedTouches[0].clientY; // 注意不要用screenX/Y，那是在屏幕中的位置，要用在浏览器窗口中的位置
var touchX = event.originalEvent.changedTouches[0].clientX;
//console.log(touchX+":"+item.offsetLeft);
var isOverElementHeight = touchY >= item.offsetTop && ( touchY < ( item.offsetTop + item.offsetHeight )),
isOverElementWidth = touchX >= item.offsetLeft && ( touchX < ( item.offsetLeft + item.offsetWidth )),
isOverElement = isOverElementHeight && isOverElementWidth;
//console.log(isOverElementHeight+":"+isOverElementWidth);
if (!isOverElement) {
return false;
}
return true;
},
本来无意研究jquery-ui源代码，因为发现有些sortble程序在手机运行无效果，有些在手机运行有效果，而jquery-ui-sortable在手机运行也是有效的，有点好奇，才研究了jquery-ui-sortable源代码，搞清楚了其中的是非，涉及到mouse/touch/drag事件原理和算法，还是非常复杂的，拖拽比较复杂，比拖拽更复杂的就是动画了。
文中错误之处欢迎大家指正交流。
