拖拽圖片到另一個div裏
阿新 • • 發佈：2017-07-07
生效 用戶 ext 觸發 過程 fun ref ctype child
HTML代碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> #taa{width: 300px;height: 300px;background: #DEDEDE;} </style> </head> <body> <!--第一步 設置 拖拽的屬性 draggable="true" 綁定drag事件--> <img src="img/a.jpg" alt="mytu" draggable="true" id="mytu"/> <!--第二步 設置 放置位置 觸發事件 dragover--> <!--第三步 設置 放置之後 觸發事件 dragover--> <div id="taa"></div> </body> <script src="JS/tuo.js"></script> </html>
jQuery代碼
(function(){ /*------------------節點-------------- */ var mytu=document.getElementById("mytu"); var taa=document.getElementById("taa"); /*------------------事件鎖定-------------- */ //ondragstart - 用戶開始拖動元素時觸發 //ondragover - 當某被拖動的對象在另一對象容器範圍內拖動時觸發此事件 //ondrop - 在一個拖動過程中，釋放鼠標鍵時觸發此事件 mytu.ondragstart=drag;//拖動什麽 taa.ondragover=dragover;//放到何處 taa.ondrop=drop;//進行放置 /*------------------函數------------- */ function drag(ev){ //通過ondragstart事件存儲 當前節點ID到ev.dataTransfer裏面 //數據類型是 "Text"，值是可拖動元素的 id ("drag1")。 ev.dataTransfer.setData("Text",ev.target.id); console.log("hollk"); } function dragover(){ event.preventDefault();//添加一個默認事件的取消 使得drop生效 console.log("koml"); } function drop(ev){ var data=ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); console.log("huam"); } })();
- 在拖動目標上觸發事件 (源元素):
- ondragstart - 用戶開始拖動元素時觸發
- ondrag - 元素正在拖動時觸發
- ondragend - 用戶完成元素拖動後觸發
- 釋放目標時觸發的事件:
- ondragenter - 當被鼠標拖動的對象進入其容器範圍內時觸發此事件
- ondragover - 當某被拖動的對象在另一對象容器範圍內拖動時觸發此事件
- ondragleave - 當被鼠標拖動的對象離開其容器範圍內時觸發此事件
- ondrop - 在一個拖動過程中，釋放鼠標鍵時觸發此事件
拖拽圖片到另一個div裏