在拖动目标上触发事件 (源元素):
ondragstart - 用户开始拖动元素时触发
ondrag - 元素正在拖动时触发
ondragend - 用户完成元素拖动后触发
释放目标时触发的事件:
ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件
ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件
ondragleave - 当被鼠标拖动的对象离开其容器范围内时触发此事件
ondrop - 在一个拖动过程中，释放鼠标键时触发此事件
保存在dataTransfer对象中的数据只能在drop事件处理程序中读取
h5的拖放事件，触发顺序：
dragstart(drag元素) -> drag(drag元素) -> dragenter(drop元素) -> dragover(drop元素) -> dragleave(drop元素) -> drop(drop元素) -> dragend(drag元素)
编程：
1.设置元素可以被拖动：draggable=‘true’;
2.ondragstart里setData；
3.ondragover里阻止默认事件；
4.ondrop里，阻止默认事件，并getData，append到元素里；
文本拖拽
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>FileReader</title>
<style>
.box {
position: absolute;
width: 100px;
height: 100px;
background: red;
cursor: move;
}
</style>
<script type="text/javascript">
window.onload = function() {
var source = document.getElementById('inputA');
var target = document.getElementById('inputB');
target.ondrop = function(event) {
var e = event || window.event
e.target.value = '';
var text = window.getSelection().toString();
console.log(text);
e.target.value += ' for input B ';
}
}
</script>
</head>
<body>
<div>
输入框A<input type="text" id="inputA" />
输入框B<input type="text" id="inputB" />
</body>
</html>
案例一
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#div1 {
width: 480px;
height: 120px;
padding: 10px;
border: 1px solid #aaaaaa;
}
</style>
</head>
<body>
<p>请把 W3School 的图片拖放到矩形中：</p>
<div id="div1" ondrop="drop(event)" ondragover="dragover(event)"></div>
<br />
<img id="drag1"
src="https://tse1-mm.cn.bing.net/th?id=OIP.PTZJ51e7xutqxF_1nXpdawHaEK&w=192&h=108&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2"
draggable="true" ondragstart="drag(event)" />
<img id="drag2"
src="https://tse1-mm.cn.bing.net/th?id=OIP.PTZJ51e7xutqxF_1nXpdawHaEK&w=192&h=108&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2"
draggable="true" ondragstart="drag(event)" />
<script type="text/javascript">
let id = null;
function drag(ev) {
console.log(ev, '===123')
// ev.dataTransfer.setData("Text", ev.target.id);
id = ev.target.id
}
function dragover(e) {
e.preventDefault();
}
function drop(ev) {
console.log(ev, '456')
ev.preventDefault();
// var data = ev.dataTransfer.getData("Text");
// console.log(data, '=======data')
ev.target.appendChild(document.getElementById(id));
}
</script>
</body>
</html>
案例二
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.one {
width: 400px;
height: 400px;
border: 1px solid #000;
}
.one>div,
.two>div {
width: 98px;
height: 98px;
border: 1px solid #000;
border-radius: 50%;
background-color: red;
float: left;
text-align: center;
line-height: 98px;
}
.two {
width: 400px;
height: 400px;
border: 1px solid #000;
position: absolute;
left: 600px;
top: 200px;
}
</style>
</head>
<body>
<div class="one">
<div draggable="true">1</div>
<div draggable="true">2</div>
<div draggable="true">3</div>
<div draggable="true">4</div>
<div draggable="true">5</div>
<div draggable="true">6</div>
<div draggable="true">7</div>
<div draggable="true">8</div>
</div>
<div class="two"></div>
<script>
var boxs = document.querySelectorAll('.one div');
// 临时的盒子 用于存放当前拖拽的元素
var two = document.querySelector('.two');
var temp = null;
// 给8个小盒子分别绑定拖拽事件
for (var i = 0; i < boxs.length; i++) {
boxs[i].ondragstart = function () {
// 保持当前拖拽的元素
temp = this;
console.log(temp);
}
boxs[i].ondragend = function () {
// 当拖拽结束 ，清空temp
temp = null;
console.log(temp);
}
}
// 目标元素的拖拽事件
two.ondragover = function (e) {
// 阻止拖拽的默认行为
e.preventDefault();
}
// 当在目标元素上松开鼠标是触发
two.ondrop = function () {
// 将拖拽的元素追加到 two里面来
this.appendChild(temp);
}
</script>
</body>
</html>
案例三
<!DOCTYPE HTML>
<html>
<head>
<style>
.droptarget {
float: left;
width: 100px;
height: 35px;
margin: 15px;
padding: 10px;
border: 1px solid #aaaaaa;
}
</style>
</head>
<body>
<p>Drag the p element back and forth between the two rectangles:</p>
<div class="droptarget">
<p draggable="true" id="dragtarget">Drag me!</p>
</div>
<div class="droptarget"></div>
<p style="clear:both;"><strong>Note:</strong> drag events are not supported in Internet Explorer 8 and earlier versions or Safari 5.1 and earlier versions.</p>
<p id="demo"></p>
<script>
/* Events fired on the drag target */
document.addEventListener("dragstart", function(event) {
// The dataTransfer.setData() method sets the data type and the value of the dragged data
event.dataTransfer.setData("Text", event.target.id);
// Output some text when starting to drag the p element
document.getElementById("demo").innerHTML = "Started to drag the p element.";
// Change the opacity of the draggable element
event.target.style.opacity = "0.4";
});
// While dragging the p element, change the color of the output text
document.addEventListener("drag", function(event) {
document.getElementById("demo").style.color = "red";
});
// Output some text when finished dragging the p element and reset the opacity
document.addEventListener("dragend", function(event) {
document.getElementById("demo").innerHTML = "Finished dragging the p element.";
event.target.style.opacity = "1";
});
/* Events fired on the drop target */
// When the draggable p element enters the droptarget, change the DIVS's border style
document.addEventListener("dragenter", function(event) {
if ( event.target.className == "droptarget" ) {
event.target.style.border = "3px dotted red";
}
});
// By default, data/elements cannot be dropped in other elements. To allow a drop, we must prevent the default handling of the element
document.addEventListener("dragover", function(event) {
event.preventDefault();
});
// When the draggable p element leaves the droptarget, reset the DIVS's border style
document.addEventListener("dragleave", function(event) {
if ( event.target.className == "droptarget" ) {
event.target.style.border = "";
}
});
/* On drop - Prevent the browser default handling of the data (default is open as link on drop)
Reset the color of the output text and DIV's border color
Get the dragged data with the dataTransfer.getData() method
The dragged data is the id of the dragged element ("drag1")
Append the dragged element into the drop element
*/
document.addEventListener("drop", function(event) {
event.preventDefault();
if ( event.target.className == "droptarget" ) {
document.getElementById("demo").style.color = "";
event.target.style.border = "";
var data = event.dataTransfer.getData("Text");
event.target.appendChild(document.getElementById(data));
}
});
</script>
</body>
</html>
参考:https://blog.csdn.net/weixin_41229588/article/details/106574573
参考:https://www.cnblogs.com/cina33blogs/p/7250580.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.oul {
position: relative;
width: 300px;
height: 300px;
border: 1px dashed #ccc;
}
.one,
.two,
.three,
.four,
.five {
position: absolute;
list-style: none;
width: 30px;
height: 30px;
border: 1px solid #f00;
}
.one {
left: 0;
top: 0;
}
.two {
right: 0;
top: 0;
}
.three {
left: 0;
bottom: 0;
}
.four {
right: 0;
bottom: 0;
}
.five {
left: 50%;
top: 50%;
}
</style>
</head>
<body>
<ul class="oul">
<li class="one"></li>
<li class="two"></li>
<li class="three"></li>
<li class="four"></li>
<li class="five"></li>
</ul>
<script>
let but = document.getElementsByTagName('li')[0]
let box = document.getElementsByTagName('ul')[0]
let drag = false; // down 开关
let maxx = 0, maxy = 0;
let lw = 0, lt = 0;
but.onmousedown = function (e) {
console.log('e', e)
drag = true;
maxx = e.target.offsetLeft;
maxy = e.target.offsetTop;
lw = e.clientX;
lt = e.clientY;
}
but.onmouseup = function () {
drag = false
console.log(123)
}
but.onmousemove = function (et) {
console.log(drag, '==that', et)
if (!drag) {
return false;
}
let x = et.clientX;
let y = et.clientY;
let distancex = x - lw;
let distancey = y - lt;
console.log('drag', drag,)
this.style.left = maxx + distancex + "px";
this.style.top = maxy + distancey + "px";
}
</script>
</body>
</html>
扫一扫
1456
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
