学习链接: draggable-MDN
学习链接: 拖放API-MDN
学习链接: draggable 属性-W3School
HTML5新属性draggable,目前只有 Firefox、Chrome 以及 Safari 和以其为内核的浏览器支持 draggable 属性,并且与之相关还有7个事件。
本实验拖放示例
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>html5-拖拽</title>
<style>
.box{
width: 100px;
height: 100px;
background-color: #1B6D85;
position: absolute;
border-radius: 50%;
cursor: grab;
}
</style>
</head>
<body>
<div id="box" class="box" draggable="true" style="left: 300px;top: 200px;">
</div>
<script>
// 源对象: 被拖拽的元素
// 目标元素: 源对象当前所处的区域
//e 指代的都是 拖拽事件...
/*
被拖动的源对象可以触发的事件: 都是e.target
(1)ondragstart:源对象开始被拖动
(2)ondrag:源对象被拖动过程中(鼠标可能在移动也可能未移动)
(3)ondragend:源对象被拖动结束
拖动源对象可以进入到上方的目标对象可以触发的事件:
(1)ondragenter:目标对象被源对象拖动着进入
(2)ondragover:目标对象被源对象拖动着悬停在上方
(3)ondragleave:源对象拖动着离开了目标对象
(4)ondrop:源对象拖动着在目标对象上方释放/松手
*/
// 改变元素offsetLeft offsetTop
let box = document.getElementById('box');
// offsetHeight 元素高度 .. offsetTop偏移!
let oriOffsetLeft;
let oriOffsetTop;
let oriClientX ,oriClientY,newClientX,newClientY;
// 源对象开始拖动
box.ondragstart = function(e){
oriOffsetLeft = box.offsetLeft;
oriOffsetTop = box.offsetTop;
oriClientX = e.clientX;
oriClientY = e.clientY;
}
// 拖动中
box.ondrag = function(e){
newClientX = e.clientX;
newClientY = e.clientY;
}
// 拖动结束
box.ondragend = function(e){
let rLeft = parseInt(newClientX) - parseInt(oriClientX) + parseInt(oriOffsetLeft);
let rTop = parseInt(newClientY) - parseInt(oriClientY) + parseInt(oriOffsetTop);
if(rLeft<=0){
rLeft = 0;
}
if(rLeft>= (window.innerWidth-box.offsetWidth)){
rLeft = (window.innerWidth-box.offsetWidth);
}
if(rTop<=0){
rTop = 0;
}
if(rTop>= (window.innerHeight-box.offsetHeight)){
rTop = (window.innerHeight-box.offsetHeight);
}
box.style.left = rLeft.toString() + 'px';
box.style.top = rTop.toString() + 'px';
}
</script>
</body>
</html>
事件
学习链接: 拖放API-MDN
事件 | On型事件处理程序 | 触发时刻 |
---|---|---|
drag | ondrag | 当拖拽元素或选中的文本时触发。 |
dragend | ondragend | 当拖拽操作结束时触发 (比如松开鼠标按键或敲“Esc”键). |
dragenter | ondragenter | 当拖拽元素或选中的文本到一个可释放目标时触发。 |
dragleave | ondragleave | 当拖拽元素或选中的文本离开一个可释放目标时触发。 |
dragover | ondragover | 当元素或选中的文本被拖到一个可释放目标上时触发(每100毫秒触发一次)。 |
dragstart | ondragstart | 当用户开始拖拽一个元素或选中的文本时触发。 |
drop | ondrop | 当元素或选中的文本在可释放目标上被释放时触发。 |
感谢您看完本篇文章,希望能帮到您。如果文章有错误,请留言,诚恳请教。