js利用拖放實(shí)現(xiàn)添加刪除
更新時(shí)間：2020年08月27日 08:42:23 作者：mo-2016
這篇文章主要為大家詳細(xì)介紹了js利用拖放實(shí)現(xiàn)添加刪除，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了js利用拖放實(shí)現(xiàn)添加刪除的具體代碼，供大家參考，具體內(nèi)容如下
實(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 style="width: 600px;border: 1px solid black;">
<h2>可將喜歡的項(xiàng)目拖進(jìn)收藏夾</h2>
<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" 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");
//開(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>
到這里實(shí)現(xiàn)拖放結(jié)束。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- 基于JavaScript 實(shí)現(xiàn)拖放功能
- JS實(shí)現(xiàn)的簡(jiǎn)易拖放效果示例
- 淺談js原生拖放
- Vue.js實(shí)現(xiàn)拖放效果的實(shí)例
- 談?wù)剬?duì)JavaScript原生拖放的深入理解
- javascript實(shí)現(xiàn)拖放效果
- JavaScript實(shí)現(xiàn)的多種鼠標(biāo)拖放效果
- JavaScript實(shí)現(xiàn)網(wǎng)頁(yè)對(duì)象拖放功能的方法
- javascript 拖放效果實(shí)現(xiàn)代碼
- Javascript拖拽&拖放系列文章3之細(xì)說(shuō)事件對(duì)象
webpack實(shí)現(xiàn)靜態(tài)資源緩存的方法
本文主要介紹了webpack實(shí)現(xiàn)靜態(tài)資源緩存的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-08-08 
基于Bootstrap使用jQuery實(shí)現(xiàn)簡(jiǎn)單可編輯表格
這篇文章主要介紹了基于Bootstrap使用jQuery實(shí)現(xiàn)簡(jiǎn)單可編輯表格的相關(guān)資料,需要的朋友可以參考下
2016-05-05 
簡(jiǎn)單實(shí)現(xiàn)js鼠標(biāo)跟隨效果
這篇文章主要教大家如何簡(jiǎn)單實(shí)現(xiàn)js鼠標(biāo)跟隨效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-07-07 
今天小編就為大家分享一篇解決layer彈層遮罩擋住窗體的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-08-08 
微信小程序js文件改變參數(shù)并在視圖上及時(shí)更新【推薦】
這篇文章主要介紹了微信小程序js文件改變參數(shù)并在視圖上及時(shí)更新的實(shí)現(xiàn)代碼，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧
2018-06-06 
這篇文章主要介紹了JS?Date時(shí)間格式化的方法,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧
2024-01-01 
element-plus 官方表格排序問(wèn)題小結(jié)
在使用Element Plus官方API時(shí),表格默認(rèn)排序可能會(huì)遇到問(wèn)題,一個(gè)列表可能被多次排序影響數(shù)據(jù)展示,解決方法是修改useSortTable.js文件,這樣可以確保表格按預(yù)期正確排序,更多詳情可查閱相關(guān)的技術(shù)文檔或資源
2024-10-10 
一直都在想怎么樣使彈出的DIV能在任何時(shí)候都是居中顯示的，剛開(kāi)始的時(shí)候是用CSS樣式直接定義好層的位置，但是當(dāng)頁(yè)面很長(zhǎng)的時(shí)候，或是瀏覽器窗口大小不是固定的時(shí)候就不能正確的顯示，所以只好用JS來(lái)控制DIV的顯示位置。
2008-06-06 
axios/fetch實(shí)現(xiàn)stream流式請(qǐng)求示例詳解
這篇文章主要為大家介紹了axios/fetch實(shí)現(xiàn)stream流式請(qǐng)求示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-09-09