利用JavaScript實(shí)現(xiàn)一個(gè)拖放刪除功能

發(fā)布時(shí)間：2020-11-06 17:26:21 來(lái)源：億速云閱讀：176 作者：Leah 欄目：開(kāi)發(fā)技術(shù)

利用JavaScript實(shí)現(xiàn)一個(gè)拖放刪除功能？相信很多沒(méi)有經(jīng)驗(yàn)的人對(duì)此束手無(wú)策，為此本文總結(jié)了問(wèn)題出現(xiàn)的原因和解決方法，通過(guò)這篇文章希望你能解決這個(gè)問(wèn)題。

實(shí)現(xiàn)的效果如下：

代碼如下：

<!DOCTYPE html>
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html" charset="utf-8">
 <title>通過(guò)拖放實(shí)現(xiàn)添加刪除</title>
 <style type="text/css">
 div>div{
  display: inline-block;
  padding: 10px;
  background-color: #aaa;
  margin: 3px;
 }
 </style>
</head>
<body>
 <!-- 文件所在地 -->
 <div >
 <h3>可將喜歡的項(xiàng)目拖進(jìn)收藏夾</h3>
 <div draggable="true" "dsHandler(event);">瘋狂Java聯(lián)盟</div>
 <div draggable="true" "dsHandler(event);">瘋狂軟件教育</div>
 <div draggable="true" "dsHandler(event);">關(guān)于我們</div>
 <div draggable="true" "dsHandler(event);">瘋狂成員</div>
 </div>
 <!-- 收藏夾 -->
 <div id="dest" >
 <h3 "return false;">收藏夾</h3>
 </div>
 <!-- 垃圾簍 -->
 <img id="gb" draggable="false" alt="垃圾簍" src="C:\Users\Administrator\Desktop\timg.jpg" >

 <!-- js -->
 <script type="text/javascript">
 let dest=document.getElementById("dest");
 //開(kāi)始拖動(dòng)事件的事件監(jiān)聽(tīng)器
 let dsHandler=function(event){
  event.dataTransfer.setData("text/plain","<item>"+event.target.innerHTML);
 }

 dest.function(event){
  event.preventDefault();
  let text=event.dataTransfer.getData("text/plain");
  //如果該text以<item>開(kāi)頭
  if(text.indexOf("<item>")==0){
  //創(chuàng)建一個(gè)新的div
  let newEle=document.createElement("div");
  //以當(dāng)前事件為該元素生成唯一的ID
  newEle.id=new Date().getUTCMilliseconds();
  //該元素內(nèi)容為“拖”過(guò)來(lái)的數(shù)據(jù)
  newEle.innerHTML=text.substring(6);
  //設(shè)置該元素允許拖動(dòng)
  newEle.draggable="true";
  //為該事件的開(kāi)始拖動(dòng)事件指定監(jiān)聽(tīng)器
  newEle.function(event){
   //將被拖動(dòng)元素的id屬性值設(shè)置成被拖動(dòng)的數(shù)據(jù)
   event.dataTransfer.setData("text/plain","<remove>"+newEle.id);
  }
  dest.appendChild(newEle);
  }
 }

 //當(dāng)把被拖動(dòng)元素“放”到垃圾簍上時(shí)觸發(fā)該方法
 document.getElementById("gb").function(event){
  let id=event.dataTransfer.getData("text/plain");
  //如果id以<remove>開(kāi)頭
  if (id.indexOf("<remove>")==0) {
  //根據(jù)“拖”過(guò)來(lái)的數(shù)據(jù)，獲取被拖動(dòng)的元素
  let target=document.getElementById(id.substring(8));
  //刪除被拖動(dòng)的元素
  dest.removeChild(target);
  }
 }

 //ondragover 被拖動(dòng)的元素進(jìn)入本元素的范圍內(nèi)拖動(dòng)時(shí)會(huì)不斷地觸發(fā)該事件
 document.function(event){
  //取消事件的默認(rèn)行為
  return false;
 }

 //ondrop 其他元素被放到了本元素中時(shí)觸發(fā)該事件
 document.function(event){
  //取消事件的默認(rèn)行為
  return false;
 }
 </script>
</body>
</html>

看完上述內(nèi)容，你們掌握利用JavaScript實(shí)現(xiàn)一個(gè)拖放刪除功能的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！

向AI問(wèn)一下細(xì)節(jié)

利用JavaScript實(shí)現(xiàn)一個(gè)拖放刪除功能

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽