非常有趣,到目前为止只用 jQuery 完成过。稍微重写一下,并确保每个 mousemove 的事件侦听器都被删除 - 这将是一个内存泄漏,否则您可能会开始注意到:
http://jsfiddle.net/8wtq17L8/
var contextmenu = document.getElementById('contextMenu');
var initX, initY, mousePressX, mousePressY;
contextmenu.addEventListener('mousedown', function(event) {
initX = this.offsetLeft;
initY = this.offsetTop;
mousePressX = event.clientX;
mousePressY = event.clientY;
this.addEventListener('mousemove', repositionElement, false);
window.addEventListener('mouseup', function() {
contextmenu.removeEventListener('mousemove', repositionElement, false);
}, false);
}, false);
function repositionElement(event) {
this.style.left = initX + event.clientX - mousePressX + 'px';
this.style.top = initY + event.clientY - mousePressY + 'px';
}
似乎运作良好。 :-)
++++++++++++++++++++++++++++++++++++++++++++++++++++++ +++++++++++++++++++++++++
编辑 - 我想我也会添加一个支持触摸的版本(尽管较新的设备似乎模拟鼠标事件)。与 Jquery 不同,您可以选择多个事件侦听器,因此它主要是重复,只是触摸事件:
http://codepen.io/Shikkediel/pen/VLZKor?editors=011
var object = document.getElementById('element'),
initX, initY, firstX, firstY;
object.addEventListener('mousedown', function(e) {
e.preventDefault();
initX = this.offsetLeft;
initY = this.offsetTop;
firstX = e.pageX;
firstY = e.pageY;
this.addEventListener('mousemove', dragIt, false);
window.addEventListener('mouseup', function() {
object.removeEventListener('mousemove', dragIt, false);
}, false);
}, false);
object.addEventListener('touchstart', function(e) {
e.preventDefault();
initX = this.offsetLeft;
initY = this.offsetTop;
var touch = e.touches;
firstX = touch[0].pageX;
firstY = touch[0].pageY;
this.addEventListener('touchmove', swipeIt, false);
window.addEventListener('touchend', function(e) {
e.preventDefault();
object.removeEventListener('touchmove', swipeIt, false);
}, false);
}, false);
function dragIt(e) {
this.style.left = initX+e.pageX-firstX + 'px';
this.style.top = initY+e.pageY-firstY + 'px';
}
function swipeIt(e) {
var contact = e.touches;
this.style.left = initX+contact[0].pageX-firstX + 'px';
this.style.top = initY+contact[0].pageY-firstY + 'px';
}