js 드래그 앤 드 롭 으로 추가 삭제

본 논문 의 사례 는 js 가 드래그 앤 드 롭 을 이용 하여 삭 제 된 구체 적 인 코드 를 추가 하 는 것 을 공유 하 였 으 며,구체 적 인 내용 은 다음 과 같다.
실현 효 과 는 다음 과 같다.

코드 는 다음 과 같 습 니 다:

<!DOCTYPE html>
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html" charset="utf-8">
 <title>          </title>
 <style type="text/css">
 div>div{
  display: inline-block;
  padding: 10px;
  background-color: #aaa;
  margin: 3px;
 }
 </style>
</head>
<body>
 <!--       -->
 <div style="width: 600px;border: 1px solid black;">
 <h2>            </h2>
 <div draggable="true" "dsHandler(event);">  Java  </div>
 <div draggable="true" "dsHandler(event);">      </div>
 <div draggable="true" "dsHandler(event);">    </div>
 <div draggable="true" "dsHandler(event);">    </div>
 </div>
 <!--     -->
 <div id="dest" style="width: 400px;height: 260px;border: 1px solid black;float: left;">
 <h2 "return false;">   </h2>
 </div>
 <!--     -->
 <img id="gb" draggable="false" alt="   " src="C:\Users\Administrator\Desktop\timg.jpg" style="float: left;width: 200px;height: 200px;">

 <!-- js -->
 <script type="text/javascript">
 let dest=document.getElementById("dest");
 //            
 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>  
  if(text.indexOf("<item>")==0){
  //      div
  let newEle=document.createElement("div");
  //              ID
  newEle.id=new Date().getUTCMilliseconds();
  //      “ ”     
  newEle.innerHTML=text.substring(6);
  //         
  newEle.draggable="true";
  //                
  newEle.function(event){
   //       id            
   event.dataTransfer.setData("text/plain","<remove>"+newEle.id);
  }
  dest.appendChild(newEle);
  }
 }

 //       “ ”           
 document.getElementById("gb").function(event){
  let id=event.dataTransfer.getData("text/plain");
  //  id <remove>  
  if (id.indexOf("<remove>")==0) {
  //  “ ”     ,        
  let target=document.getElementById(id.substring(8));
  //        
  dest.removeChild(target);
  }
 }

 //ondragover                            
 document.function(event){
  //         
  return false;
 }

 //ondrop                   
 document.function(event){
  //         
  return false;
 }
 </script>
</body>
</html>
여기까지 끌 어 다 놓 기 끝 났 습 니 다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.

좋은 웹페이지 즐겨찾기