html拖拽调整顺序,js drag拖动排序

这次来做一个拖动排序，带有动画效果，先上效果图，不熟悉拖动api的可以查看链接

效果图

在线演示：http://jsrun.net/XpiKp/edit

思路(先不考虑动画)

每个li既是可拖动，同时也是容器，拖动到li上面时移动拖动的li。

先把html写好

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

css

ul {

list-style: none;

margin: 200px;

font-size: 0;

}

.ele {

font-size: 16px;

width: 100px;

height: 40px;

border: 1px solid #999;

background: #EA6E59;

margin: 2px 0;

border-radius: 10px;

padding-left: 10px;

color: white;

cursor: move;

}

下面添加事件，由于拖动是实时的，所以没有使用drop而是使用了dragover。并且用一个变量来保存当前拖动的元素。这里直接使用事件委托，直接使用ul来监听

var node = document.querySelector("#container");

var draging = null;

//使用事件委托，将li的事件委托给ul

node.ondragstart = function(event) {

/firefox设置了setData后元素才能拖动！！！！

event.dataTransfer.setData("te", event.target.innerText); //不能使用text，firefox会打开新tab

draging = event.target;

}

node.ondragover = function(event) {

event.preventDefault();

var target = event.target;

//因为dragover会发生在ul上，所以要判断是不是li

if (target.nodeName === "LI"&&target !== draging) {

//_index是实现的获取index

if (_index(draging) < _index(target)) {

target.parentNode.insertBefore(draging, target.nextSibling);

} else {

target.parentNode.insertBefore(draging, target);

}

}

}

接下来就是移动正在拖动的li了，当前li的index大于容器li时就插入在容器的前面，反之插入在容器的后面，那么怎么获取当前li的index呢？Node有一个属性previousElementSibling，表示该元素前面的一个元素，那么我们可以这样

function _index(el) {

var index = 0;

if (!el || !el.parentNode) {

return -1;

}

while (el && (el = el.previousElementSibling)) {

index++;

}

return index;

}

动画

好了，先讲思路，动画其实不需要给所有元素都添加，只需要给移动的元素和目标元素添加动画就够了，例如我们交换了1和2的位置，那么就给1和2添加动画。这种添加动画的思路是通用的，比如可以做元素的页面进入动画。

1和2

我们可以记录1和2交换之前的位置，然后获取交换之后的位置，然后让元素从原位置慢慢移动到目标位置。

图片表示

图片表示

那么我们先获取初始位置，肯定是在移动元素之前进行获取，那么我们在dragover移动元素之前加上

var targetRect = target.getBoundingClientRect();

var dragingRect = draging.getBoundingClientRect();

然后在交换位置之后再次获取元素位置

var targetAfter = target.getBoundingClientRect();

var dragingAfter = draging.getBoundingClientRect();

位置还原

先获取两者的差，然后就可以为其添加transform，由于我们需要将元素瞬间移动到原来的位置，所以我们需要将其transition设为none

target.style.transition='none';

target.style.transform='translate3d(' +

(targetRect.left - targetAfter.left) + 'px,' +

(targetRect.top - targetAfter.top) + 'px,0)'

//draging同理

然后就可以再设置transform进行移动，这里如果直接设置的话，当然动画是无法显示的，原因可以看这里

target.offsetWidth; //触发重绘

target.style.transition='all 300ms';

target.style.transform='translate3d(0,0,0)';

还有一个问题

由于我们的动画是添加在dragover里面，然而dragover是会不停的触发，加过就是元素不停“抽搐”，所以我们需要判断元素是否已经添加了动画。这个的话方法就很多了，这里我是设置了一个定时器，事件到了之后将transition和transform清空，设置动画之前进行判断定时器是否已经存在

clearTimeout(target.animated);

target.animated = setTimeout(function() {

target.style.transition='';

target.style.transform='';

target.animated = false;

//draging同理

}, ms);