jQuery实现上下拖动进行排序排序

【实例简介】

利用jQuery实现文章、分类、项目等显示列表用鼠标按住上下拖动以达到排序的效果

【实例截图】

【核心代码】

var THIS = this,
$this = $( THIS ),
offset = $this.offset(),
disX = e.pageX - offset.left,
disY = e.pageY - offset.top,

clone = $this.clone()
.css( settings.cloneStyle )
.css( 'height', $this[ height ]() )
.empty(),

hasClone = 1,

//缓存计算
thisOuterHeight = $this.outerHeight(),
thatOuterHeight = that.outerHeight(),

//滚动速度
upSpeed = thisOuterHeight,
downSpeed = thisOuterHeight,
maxSpeed = thisOuterHeight * 3;

settings.down.call( THIS );

$doc.on( 'mousemove.DDSort', function( e ){
if( hasClone ){
$this.before( clone )
.css( 'width', $this[ width ]() )
.css( settings.floatStyle )
.appendTo( $this.parent() );

hasClone = 0;
}

var left = e.pageX - disX,
top = e.pageY - disY,

prev = clone.prev(),
next = clone.next().not( $this );

$this.css({
left: left,
top: top
});

//向上排序
if( prev.length && top < prev.offset().top prev.outerHeight()/2 ){

clone.after( prev );

//向下排序
}else if( next.length && top thisOuterHeight > next.offset().top next.outerHeight()/2 ){

clone.before( next );

}

/**
* 处理滚动条
* that是带着滚动条的元素，这里默认以为that元素是这样的元素（正常情况就是这样），如果使用者事件委托的元素不是这样的元素，那么需要提供接口出来
*/
var thatScrollTop = that.scrollTop(),
thatOffsetTop = that.offset().top,
scrollVal;

//向上滚动
if( top < thatOffsetTop ){

downSpeed = thisOuterHeight;
upSpeed = upSpeed > maxSpeed ? maxSpeed : upSpeed;
scrollVal = thatScrollTop - upSpeed;

//向下滚动
}else if( top thisOuterHeight - thatOffsetTop > thatOuterHeight ){

upSpeed = thisOuterHeight;
downSpeed = downSpeed > maxSpeed ? maxSpeed : downSpeed;
scrollVal = thatScrollTop downSpeed;
}

that.scrollTop( scrollVal );

settings.move.call( THIS );

})
.on( 'mouseup.DDSort', function(){

$doc.off( 'mousemove.DDSort mouseup.DDSort' );

//click的时候也会触发mouseup事件，加上判断阻止这种情况
if( !hasClone ){
clone.before( $this.removeAttr( 'style' ) ).remove();
settings.up.call( THIS );
}
});