html5拖曳事件问题,HTML5拖拽事件

8种机械键盘轴体对比

本人程序员，要买一个写代码的键盘，请问红轴和茶轴怎么选？

在网页中，拖放是一个很常见的一个用户界面模式。简单来说，就是鼠标点击目标元素不放，移动鼠标位置，然后松开鼠标，即可将目标元素移动到另一个区域。它的实现其实很简单。以下介绍两种常见的实现方法。

使用onmouse事件实现拖放

通过监听鼠标事件实现元素拖放：必须借用onmousedown、onmousemove、onmouseup三个事件实现，且三者的顺序不能乱。onmousedown：鼠标按下事件，一般用在拖放元素上。

onmousemove：鼠标移动事件，一般用在document或者window上。

onmouseup：鼠标抬起事件，同上。

具体实现如下：var img = document.getElementById('img');

//记录鼠标点击位置和元素边界的距离

var dirX = 0,dirY = 0;

//给元素添加监听事件

img.onmousedown = function(e) {

dirX = e.clientX - img.offsetLeft;

dirY = e.clientY - img.offsetTop;

document.onmousemove = function(e) {

//记录鼠标移动距离

let moveX, moveY;

moveX = e.clientX - dirX;

moveY = e.clientY - dirY;

//处理边界问题

if (moveX < 0) {

moveX = 0

} else if (moveX > window.innerWidth - img.offsetWidth) {

moveX = window.innerWidth - img.offsetWidth

}

if (moveY < 0) {

moveY = 0

} else if (moveY > window.innerHeight - img.offsetHeight) {

moveY = window.innerHeight - img.offsetHeight

};

//实时的改变元素位置

img.style.left = moveX + 'px';

img.style.top = moveY + 'px'

}

//监听鼠标抬起事件

document.onmouseup = function(e) {

//事件取消

document.onmouseup = document.onmousemove = null

}

}

使用HTML5Drag实现拖放

拖拽元素时，将依次发生以下事件：ondragstart

ondrag：拖拽期间持续触发该事件

ondragend

在目标元素(放置目标元素)上将会发生以下事件：ondragenter：元素进入目标元素

ondragover：元素在目标元素之中移动

ondragleave/ondrop：元素离开目标元素/鼠标抬起

dataTransfer 对象：使用该对象进行数据传输setData：接收两个参数：第一个参数设置传输数据的类型：text 或者 URL，第二个参数设置值

getData：接收值，只发生在ondrop

dropEffect与effectAllowed ：通过dataTransfer对象还可以确定被拖拽元素以及放置目标的元素能够接受什么操作。其中dropEffect可以知道被拖拽元素可以执行那种放置行为。effectAllowed可以知道允许拖拽元素执行哪种dropEffect。

effectAllowed有四种值：“none”:不能把拖动的元素放在这里。这是除文本框之外所有元素的默认值。

“move”:应该把拖动的元素移动到放置目标。

“copy”:应该把拖动的元素复制到放置目标。

“link”:表示放置目标会打开拖动的元素(但拖动的元素必须是一个链接，有 URL)。要使用 dropEffect 属性，必须在 ondragenter 事件处理程序中针对放置目标来设置它。

effectAllowed的属性值如下：“uninitialized”:没有给被拖动的元素设置任何放置行为。

“none”:被拖动的元素不能有任何行为。

“copy”:只允许值为”copy”的 dropEffect。

“link”:只允许值为”link”的 dropEffect。

“move”:只允许值为”move”的 dropEffect。

“copyLink”:允许值为”copy”和”link”的 dropEffect。

“copyMove”:允许值为”copy”和”move”的 dropEffect。

“linkMove”:允许值为”link”和”move”的 dropEffect。

“all”:允许任意 dropEffect。必须在 ondragstart 事件处理程序中设置 effectAllowed 属性

使用HTML5Drag事件来实现自由拖拽，具体实现如下：var EventUtil = {

/**

* 绑定事件

* @param { type } = { 事件类型 }

* @param { callback } = { 回调函数 }

* @param { bool } = { 指定事件是否在捕获或冒泡阶段执行。true - 事件句柄在捕获阶段执行。默认，事件句柄在冒泡阶段执行 }

* */

addHandler: function(el, type, callback, bool = false) {

if (el.addEventListener) {

el.addEventListener(type, callback, bool)

} else if (el.attachEvent) {

e.attactEvent('on' + type, callback)

} else { //默认使用DOM0级的事件

el['on' + type] = callback;

}

},

}var img = document.getElementById('img');

//记录鼠标点击位置和边界的距离

var dirX = 0,dirY = 0;

var dirX, dirY;

EventUtil.addHandler(img, 'dragstart', function(e) {

console.log(e, '开始拖拽');

dirX = e.clientX - img.offsetLeft;

dirY = e.clientY - img.offsetTop;

console.log(dirX, dirY);

});

EventUtil.addHandler(window, 'dragenter', function(e) {

console.log('进入目标元素');

});

EventUtil.addHandler(window, 'dragover', function(e) {

// console.log('在目标元素中移动');

//计算鼠标移动距离

let moveX = moveY = 0;

moveX = e.clientX - dirX;

moveY = e.clientY - dirY;

//边界处理

if (moveX < 0) {

moveX = 0

} else if (moveX > (window.innerWidth - img.offsetWidth)) {

moveX = window.innerWidth - img.offsetWidth

}

if (moveY < 0) {

moveY = 0

} else if (moveY > (window.innerHeight - img.offsetHeight)) {

moveY = window.innerHeight - img.offsetHeight

}

img.style.left = moveX + 'px';

img.style.top = moveY + 'px';

//阻止默认行为

EventUtil.preventDefault(e)

});

EventUtil.addHandler(window, 'dragleave', function(e) {

console.log('离开目标元素');

});

EventUtil.addHandler(window, 'drop', function(e) {

//设置磁吸效果

if (e.clientX > (window.innerWidth / 2)) {

img.style.left = window.innerWidth - img.offsetWidth + 'px'

} else {

img.style.left = 0 + 'px';

}

// console.log(e,'drop');

// let data = e.dataTransfer.getData('text');

// console.log('drop');

// EventUtil.removeHandler()

// e.target.appendChild(document.getElementById(data))

});