drag,drop
被拖动元素,目标(释放区)
元素要设置dragable属性:true,false,auto
被拖动元素上面有三个事件,drag,dragend,按下左键,移动种,鼠标松,这三个事件一般只用获取我们的被拖动元素
event是可以继承的,mouseevent鼠标事件,dragevent拖放事件,前面都是一个个继承的
释放区:
3个事件:拖动的东西可以放在释放区,进入释放区就会触发dragenter,区域移动触发dragover,出来dragleave,这三个事件一般只用获取我们的释放区元素1
放下事件drop
问题一:因为默认是不让你放入的
阻止事件的默认行为target.οndragenter=target.ondragover的event.preventDefault();
问题二:最终怎么实现要看drop
event.target出发时间的对象
拖的时候记录id
放时候打印
cloneNode进行放的时候克隆,true克隆子子孙孙,false只克隆自己
target.addEventListener("drop",(event)=>{event.target.appendChild(document.querySelector("#"+id));
})放下时候,目标元素加上我们的这个标签
代码三
重要:
对象的datatransfor,设置格式,传递东西用的
setData有两个参数：
1.第一个参数为携带数据的数据种类的字符串，只能填入类 似“text/plain”或“textml”的表示 MIME类型的文字
2.第二个参数为要携带的数据
实践,要冒泡的(子元素触发了同时触发父元素),一个表格要知道选定的id以及,目标地点的id
parentNode
drop用到inserbefore()节点就是行放到transfer
getElementById与queryselect,一个不要加id,,一个要加
1
let source=document.querySelector("#source");source.addEventListener("dragstart",(event)=>{console.log("kaishi ")})source.addEventListener("dragend",(event)=>{console.log("jieshu")})source.addEventListener("drag",(event)=>{document.title=event.clientX+","+event.clientY;//我的标题设置为鼠标的坐标})2
let target=document.querySelector("#target");target.addEventListener("dragenter",(event)=> {console.log("进入目标")})target.addEventListener("dragover",(event)=> {console.log("目标ing")})//匿名函数,取消默认行为target.ondragenter=target.ondragover=function (event){event.preventDefault();} //复制图标target.addEventListener("dragleave",(event)=>{console.log("离开目标")})3
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><style>#source{width: 200px;height: 200px;background: #eee;}#target{width: 400px;height: 400px;background: yellow;}</style><body><div id="source" draggable="true"> </div><div id="target" > </div>
<script>let source=document.querySelector("#source");
let id;source.addEventListener("dragstart",(event)=>{// console.log("kaishi ")id=event.target.id;// console.log(id)obj=event.target;})// source.addEventListener("dragend",(event)=>{// console.log("jieshu")// })//// source.addEventListener("drag",(event)=>{// document.title=event.clientX+","+event.clientY;//我的标题设置为鼠标的坐标// })//let target=document.querySelector("#target");target.addEventListener("dragenter",(event)=> {console.log("进入目标")})target.addEventListener("dragover",(event)=> {console.log("目标ing")})//匿名函数,取消默认行为target.ondragenter=target.ondragover=function (event){event.preventDefault();} //复制图标target.addEventListener("dragleave",(event)=>{console.log("离开目标")})target.addEventListener("drop",(event)=>{alert(event.target.outerHTML)alert(id);alert(document.querySelector("#"+id))// let newElement=document.querySelector(id).cloneNode(true);//被拖动达到目标元素// event.target.appendChild(document.querySelector("#"+id));//w1event.target.appendChild(obj);//w2})</script></body>
</html>
