1.draggable设置元素是否可拖放 在标签内添加属性draggable = 'true'
2.event 全局内容保存 event.dataTransfer.setData(key标记,内容);
3.event 全局内容读取 event.dataTransfer.getData(key标记);
源对象事件:
1.ondragstart 源对象拖动开始=按下拖动
2.ondrag 源对象拖动过程中=被按住过程中 持续触发
3.ondragend 源对象拖动结束=松开
目标对象事件:
1.ondragenter 目标对象被源对象拖着进入=拖动进入
2.ondragover 目标对象被源对象拖着停留在上方=拖动进入停留 持续触发
3.ondragleave 目标对象被源对象拖着离开=拖动进入后离开
4.ondrop 目标对象被源对象拖着停留松开了鼠标=拖动进入松开鼠标
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>拖放</title>
<style type="text/css">
div {
width: 200px;
height: 300px;
border: 1px solid red;
float: left;
margin-left: 20px;
}
div#div2 {
border-color: blue;
}
div#div3 {
border-color: green;
}
p {
background: pink;
margin: 0px;
padding: 0px;
text-align: center;
cursor: pointer;
}
</style>
</head>
<body>
<div id="div1">
<!-- draggable设置元素是否可拖放 -->
<p id='p1' draggable='true'>1</p>
<p id='p2' draggable='true'>2</p>
<p id='p3' draggable='true'>3</p>
<p id='p4' draggable='true'>4</p>
</div>
<div id="div2"></div>
<div id="div3"></div>
<script type="text/javascript">
//event设置保存全局内容 属性1为设置的内容类型 属性2为内容
// event.dataTransfer.setData("Text",ev.target.id);
//event读取设置的全局内容 属性1为设置内容的类型 返回内容
//event.dataTransfer.getData("Text");
//源对象和目标对象用到的只有源对象拖动开始ondragstart 和 目标对象释放结束ondrop
// 源对象事件3个
// 1.ondragstart 源对象拖动开始=按下拖动
document.ondragstart = function(e) {
// console.log(e.target);
e.dataTransfer.setData('text/html', e.target.id);
}
// 2.ondrag 源对象拖动过程中=被按住过程中 持续触发
document.ondrag = function(e) {
// console.log('源对象拖动过程中...');
}
// 3.ondragend 源对象拖动结束=松开
document.ondragend = function(e) {
// console.log('源对象拖动结束');
}
// 目标事件4个
// 1.ondragenter 目标对象被源对象拖着进入=拖动进入
document.ondragenter = function(e) {
// console.log('目标对象被源对象拖着进入');
}
// 2.ondragover 目标对象被源对象拖着停留在上方=拖动进入停留 持续触发
document.ondragover = function(e) {
// 阻止浏览器默认行为 触发ondrop 阻止方法1.return false 阻止方法2.e.preventDefault
e.preventDefault();
// console.log('目标对象被源对象拖着停留在上方');
}
// 3.ondragleave 目标对象被源对象拖着离开=拖动进入后离开
document.ondragleave = function(e) {
// console.log('目标对象被源对象拖着离开');
}
// 4.ondrop 目标对象被源对象拖着停留松开了鼠标=拖动进入松开鼠标
document.ondrop = function(e) { //需要在ondragover阻止默认行为 才能触发
// console.log('目标对象被源对象拖着停留松开了鼠标');
let id = e.dataTransfer.getData('text/html');
if (e.target.tagName == 'DIV') { //只能拖到div里面
e.target.appendChild(document.getElementById(id));
} else if (e.target.tagName == 'P') { //p元素拖放到父元素div里面
e.target.parentNode.appendChild(document.getElementById(id));
}
}
</script>
</body>
</html>