Skip to content
This repository has been archived by the owner on Mar 27, 2020. It is now read-only.

Commit

Permalink
Merge pull request #16 from Barrior/dev
Browse files Browse the repository at this point in the history 
增加上下左右拖动-alpha
  • Loading branch information
@Barrior
Barrior authored Feb 27, 2018
2 parents bc982e3 + 1a3f381 commit 244ae2a
Show file tree
Hide file tree
Showing 4 changed files with 284 additions and 42 deletions.
164 changes: 123 additions & 41 deletions ddsort.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,8 +54,10 @@

var self = this;
var $this = $(self);
// 鼠标按下时的元素偏移
var offset = $this.offset();

// 鼠标按下时的光标坐标
// 桌面端
var pageX = e.pageX;
var pageY = e.pageY;
Expand All @@ -67,9 +69,6 @@
pageY = targetTouches[0].pageY;
}

var disX = pageX - offset.left;
var disY = pageY - offset.top;

var clone = $this.clone()
.css(settings.cloneStyle)
.css('height', $this[height]())
Expand All @@ -78,30 +77,37 @@
var hasClone = 1;

// 缓存计算
var thisOuterHeight = $this.outerHeight();
var thatOuterHeight = that.outerHeight();
var thisOuterHeight = $this.outerHeight(),
thisOuterWidth = $this.outerWidth(),
thatOuterHeight = that.outerHeight(),
thatOuterWidth = that.outerWidth();

// 滚动速度
var upSpeed = thisOuterHeight;
var downSpeed = thisOuterHeight;
var maxSpeed = thisOuterHeight * 3;
var upSpeed = thisOuterHeight,
downSpeed = thisOuterHeight,
leftSpeed = thisOuterWidth,
rightSpeed = thisOuterWidth,
maxSpeed = thisOuterHeight * 3;

settings.down.call(self);

$doc.on('mousemove.DDSort touchmove.DDSort', function (e) {

// 鼠标移动时的光标坐标
// 桌面端
var pageX = e.pageX;
var pageY = e.pageY;
var _pageX = e.pageX;
var _pageY = e.pageY;

// 移动端
var targetTouches = e.originalEvent.targetTouches;
if (e.type == 'touchmove' && targetTouches) {
pageX = targetTouches[0].pageX;
pageY = targetTouches[0].pageY;
_pageX = targetTouches[0].pageX;
_pageY = targetTouches[0].pageY;
}

if (new Date().getTime() - startTime < settings.delay) return;
if (new Date().getTime() - startTime < settings.delay) {
return;
}

if (hasClone) {
$this.before(clone)
Expand All @@ -112,54 +118,75 @@
hasClone = 0;
}

var left = pageX - disX;
var top = pageY - disY;

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

// 超出首屏减去页面滚动条高度或宽度
$this.css({
left: left - $doc.scrollLeft(),
top: top - $doc.scrollTop()
var disX = pageX - _pageX;
var disY = pageY - _pageY;
var left = offset.left - disX;
var top = offset.top - disY;

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

// 向上排序
if (prev.length && top < prev.offset().top + prev.outerHeight() / 2) {
var $left = getLeft(clone),
$right = getRight(clone, $this),
$top = getTop(clone),
$under = getUnder(clone, $this);

clone.after(prev);

if ($top && $top.length && top < $top.offset().top + $top.outerHeight(true) / 2) {
// 向上排序
$top.before(clone);

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

clone.before(next);

$under.after(clone);

} else if($left && $left.length && left < $left.offset().left + $left.outerWidth(true) / 2) {
//向左排序
$left.before(clone);

} else if($right && $right.length && left + thisOuterWidth > $right.offset().left + $right.outerWidth(true) / 2) {
//向右排序
$right.after(clone);

}

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

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

// 向上滚动
downSpeed = thisOuterHeight;
upSpeed = ++upSpeed > maxSpeed ? maxSpeed : upSpeed;
scrollVal = thatScrollTop - upSpeed;

// 向下滚动
var scrollVal = thatScrollTop - upSpeed;
that.scrollTop(scrollVal);
} else if (top + thisOuterHeight - thatOffsetTop > thatOuterHeight) {

// 向下滚动
upSpeed = thisOuterHeight;
downSpeed = ++downSpeed > maxSpeed ? maxSpeed : downSpeed;
scrollVal = thatScrollTop + downSpeed;
var scrollVal = thatScrollTop + downSpeed;
that.scrollTop(scrollVal);
}

that.scrollTop(scrollVal);
var thatScrollLeft = that.scrollLeft();
var thatOffsetLeft = that.offset().left;
if (left < that.offset().left) {
// 向左滚动
rightSpeed = thisOuterWidth;
leftSpeed = ++leftSpeed > maxSpeed ? maxSpeed : leftSpeed;
var scrollVal = thatScrollLeft - leftSpeed;
that.scrollLeft(scrollVal);
} else if (left + thisOuterWidth - thatOffsetLeft > thatOuterWidth) {
// 向右滚动
leftSpeed = thisOuterWidth;
rightSpeed = ++rightSpeed > maxSpeed ? maxSpeed : rightSpeed;
var scrollVal = thatScrollLeft + rightSpeed;
that.scrollLeft(scrollVal);
}

settings.move.call(self, left - $doc.scrollLeft(), top - $doc.scrollTop());
settings.move.call(self, left, top);
})
.on('mouseup.DDSort touchend.DDSort', function () {

Expand All @@ -176,4 +203,59 @@
});
});
};


//允许计算误差
var deviation = 5;

var getLeft = function (clone) {
var left = clone.prev();
if(left.length && clone.offset().top==left.offset().top) {
var _dev = Math.abs(clone.offset().left - (left.offset().left + left.outerWidth(true)));
if(_dev <= deviation) {
return left;
}
}
return undefined;
}
var getTop = function (clone, prev) {
if(!prev){
prev = clone.prev();
}
if(!prev.length) {
return undefined;
}
if(clone.offset().left==prev.offset().left) {
var _dev = Math.abs(clone.offset().top - (prev.offset().top+prev.outerHeight(true)));
if(_dev <= deviation) {
return prev;
}
}
return getTop(clone, prev.prev());
}
var getRight = function (clone, $this) {
var rigth = clone.next().not($this);
if(rigth.length && clone.offset().top==rigth.offset().top) {
var _dev = Math.abs(clone.offset().left - (rigth.offset().left-clone.outerWidth(true)));
if(_dev <= deviation) {
return rigth;
}
}
return undefined;
}
var getUnder = function (clone, $this, next) {
if(!next){
next = clone.next().not($this);
}
if(!next.length) {
return undefined;
}
if(clone.offset().left==next.offset().left) {
var _dev = Math.abs(clone.offset().top - (next.offset().top-clone.outerHeight(true)));
if(_dev <= deviation) {
return next;
}
}
return getUnder(clone, $this, next.next().not($this));
}
}(jQuery);
2 changes: 1 addition & 1 deletion ddsort.min.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading

0 comments on commit 244ae2a

Please sign in to comment.