H5ke14--1--拖放

介紹drag,drop

一.被拖動元素,目標(釋放區)

元素要設置dragable屬性:true,false,auto

被拖動元素上面有三個事件,drag,dragend,按下左鍵,移動種,鼠標松,這三個事件一般只用獲取我們的被拖動元素

冒泡:event是可以繼承的,mouseevent鼠標事件,dragevent拖放事件,前面都是一個個繼承的

二.釋放區:

3個事件:拖動的東西可以放在釋放區,進入釋放區就會觸發dragenter,區域移動觸發dragover,出來dragleave,這三個事件一般只用獲取我們的釋放區元素1

三.放下事件drop

目的:圖一弄成圖二

方法一:

相比方法二更加精準用的id,

獲取事件的元素的id給出來id,我加id這個事件的對象

id=event.target.id;

?event.target.appendChild(document.querySelector("#"+id));

代碼三: 解開注釋event.target.appendChild(document.querySelector("#"+id));

方法二:

一開始點擊就是我們事件的元素給出來obj,然后我放的元素再加入obj!

代碼三:下面兩個注釋解開

source.addEventListener("dragstart",(event)=>{//obj=event.target;}

target.addEventListener("drop",(event)=>{?event.target.appendChild(obj);//w2}

方法三

我們只需要兩個引發變量來引發我們的兩個事件,以及一個取消默認事件

dragstart用來進行存數據,drop事件設置數據?event.target.appendChild(document.querySelector("#"+event.dataTransfer.getData("text")),? ? ? ? event.preventDefault();

四.解決一:鼠標禁止變成加號,因為默認是不讓你放入的

阻止事件的默認行為dragenter和dragover都加上event.preventDefault();就行了.注意這個是在釋放區做的,好像阻止dragover就可以了--尷尬--

五.解決二:最終怎么實現要看drop

event.target出發時間的對象

拖的時候記錄id

放時候打印

cloneNode進行放的時候克隆,true克隆子子孫孫,false只克隆自己

六.target.addEventListener("drop",(event)=>{event.target.appendChild(document.querySelector("#"+id));
})放下時候,目標元素加上我們的這個標簽,getElementById就不用加上"#"

datatransfor對象,傳遞東西用的鍵值對

setData有兩個參數：
1.第一個參數為攜帶數據的數據種類的字符串，只能填入類似“text/plain”或“textml”的表示 MIME類型的文字
2.第二個參數為要攜帶的數據

 圖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;//我的標題設置為鼠標的坐標})

 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("離開目標")})

<!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>//目標進行取消事件的進入//source--------------------------------------------------let source=document.querySelector("#source");let id;source.addEventListener("dragstart",(event)=>{//// console.log("kaishi ")id=event.target.id;obj=event.target;event.dataTransfer.setData("text",event.target.id)//綁定一個事件,那么我后面queryselect就可以id調用// console.log(id)})//     source.addEventListener("dragend",(event)=>{//         console.log("jieshu")//     })////         source.addEventListener("drag",(event)=>{//             document.title=event.clientX+","+event.clientY;//我的標題設置為鼠標的坐標//         })////target--------------------------------------------------let target=document.querySelector("#target");// target.addEventListener("dragenter",(event)=> {//     console.log("進入目標")//     // event.preventDefault();// })target.addEventListener("dragover",(event)=> {// console.log("目標ing")event.preventDefault();})//匿名函數,取消默認行為// 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// let source=document.querySelector("#"+event.dataTransfer.getData("text"))//w3// event.target.appendChild(source)// alert(event.dataTransfer.getData("text"))//source})</script></body>
</html>

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/208988.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/208988.shtml
英文地址，請注明出處：http://en.pswp.cn/news/208988.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！