css鼠标拖拉卡顿_JavaScript实现元素拖动性能优化

前言：前几天没事干写了个小网站，打算用原生的javascript实现元素的拖动，但是事情并没有想象的那么顺利，首先是实现了拖动的元素卡的不能再卡，简直不能够，上图~~

看见没？这就是效果，简直让人欲哭无泪啊，查了大量的资料也无济于事，根本就没有人会遇到过这个问题，但是经过N次试验，终于找到了原因——竟然是我给这个元素添加了transition属性导致的，元凶：

去掉这个属性之后，就变得完全不一样了

至于原因，我现在也不知道为什么，很无奈╮(╯▽╰)╭

接下来就是性能优化了，我原来的实现方式是给元素添加一个mousemove事件，然后判断事件对象的buttons是否为1，如果是1的话表明此时左键按下，然后记录此时鼠标的x和y的坐标，当下次触发mousemove事件的时候用当前鼠标的位置减去上次记录的鼠标的位置就是鼠标移动的距离，然后用元素当前的位置加上鼠标移动的距离就实现了拖动，代码如下：

//实现拖动

var lastClientX = 0;var lastClientY = 0;var count = 0;

addCommandCard.addEventListener('mousemove', function() {if(arguments[0].buttons == 1) {