pc端通過拖放實現添加、刪除功能
話不多說上完整代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="favicon.ico" mce_href="favicon.ico" rel="shortcut icon bookmark" type="image/x-icon" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>通過拖放實現添加、刪除 </title>
<style type="text/css">
.container{
padding: 10px;
box-sizing: border-box;
}
.container .mainclassify {
color: #333333;
}
.container .mainclassify .title{
line-height: 44px;
}
.container .mainclassify .title span{
color: #CCCCCC;
margin-left: 10px;
}
.container .mainclassify .listgroup-item {
background-color: none;
border: none;
overflow: hidden;
}
.container .mainclassify .listgroup-item li{
float: left;
width: 25%;
height: auto;
}
.container .mainclassify .listgroup-item .item_list{
/*background-color:;*/
width: 90%;
height: 70px;
margin: 5px auto;
padding: 5px;
box-sizing: border-box;
font-size: 12px;
color: #333;
border-radius: 5px;
background: #fff;
}
</style>
</head>
<body>
<main class="container">
<div class="mainclassify">
<p class="fz14 title">我的分類</p>
<ul class="listgroup-item">
<li draggable="true" ondragstart="dsHandler(event)"><div class="item_list">推薦1</div></li>
<li draggable="true" ondragstart="dsHandler(event)"><div class="item_list">推薦2</div></li>
<li draggable="true" ondragstart="dsHandler(event)"><div class="item_list">推薦3</div></li>
<li draggable="true" ondragstart="dsHandler(event)"><div class="item_list">推薦4</div></li>
<li draggable="true" ondragstart="dsHandler(event)"><div class="item_list">推薦5</div></li>
<li draggable="true" ondragstart="dsHandler(event)"><div class="item_list">推薦6</div></li>
<li draggable="true" ondragstart="dsHandler(event)"><div class="item_list">推薦7</div></li>
<li draggable="true" ondragstart="dsHandler(event)"><div class="item_list">推薦8</div></li>
</ul>
<div stylex="border: 1px solid;width: 100%;height: 100px;" id="dest">
<p ondragleave="return false">書藏家</p>
</div>
<img src="../images/garbagebin.png" id="gb" draggable="false"/>
</div>
</main>
<script type="text/javascript">
var dest = document.getElementById("dest");
//拖動的時間監聽
var dsHandler = function(evt){
//將被拖動的元素的innerHTML屬性設置成被拖動的數據
evt.dataTransfer.setData("text/plain","<item>"+evt.target.innerHTML);
};
dest.ondrop = function(evt){
evt.preventDefault();
var text = evt.dataTransfer.getData("text/plain");
// 如果該text以<item>開頭
if (text.indexOf("<item>") == 0)
{
// 創建一個新的div元素
var newEle = document.createElement("div");
// 以當前時間為該元素生成一個唯一的ID
newEle.id = new Date().getUTCMilliseconds();
// 該元素內容為「拖」過來的數據
newEle.innerHTML = text.substring(6);
// 設置該元素允許拖動
newEle.draggable="true";
// 為該元素的開始拖動事件指定監聽器
newEle.ondragstart = function(evt)
{
// 將被拖動元素的id屬性值設置成被拖動的數據
evt.dataTransfer.setData("text/plain"
, "<remove>" + newEle.id);
}
dest.appendChild(newEle);
}
};
// 當把被拖動元素「放」到垃圾桶上時激發該方法。
document.getElementById("gb").ondrop = function(evt)
{
var id = evt.dataTransfer.getData("text/plain");
// 如果id以<remove>開頭
if (id.indexOf("<remove>") == 0)
{
// 根據「拖」過來的數據，獲取被拖動的元素
var target = document.getElementById(id.substring(8));
// 刪除被拖動的元素
dest.removeChild(target);
}
}
document.ondragover = function(evt)
{
// 取消事件的默認行為
return false;
}
document.ondrop = function(evt)
{
// 取消事件的默認行為
return false;
}
</script>
</body>
</html>
其實，拖放刪除和添加這個功能最關鍵的地方就是「攜帶數據」。正是因為利用了DataTransfer對象來攜帶數據，才可以像剛才那樣添加和刪除。
下面是攜帶數據的基本思路：
「拖」開始的時候（『拖』通過ondragstart事件監聽器來實現，上面的代碼有詳細注釋喲），程序把需要攜帶的數據放入DataTransfer對象中。
「放」下元素的時候（通過ondrop事件監聽器來實現），程序從DataTransfer對象中取出數據，並利用該數據進行相應的處理。上邊的程序就為兩種拖放數據分別添加了<item>、<remove>，分別代表需要添加收藏夾的數據和需要刪除的數據。
好啦，以上就是通過拖動元素來添加和刪除的功能實現。由此可見，通過DataTransfer對象，我們可以讓拖放操作實現更豐富的功能。畢竟，DataTransfer對象的屬性和方法那麼多，想怎麼搭配都可以~
好啦，如果大家有什麼疑問，或者發現文章中有什麼錯誤，歡迎大家留言評論呀，我們一起學習咯~
完整代碼：https://download.csdn.net/download/qq_42396791/10738911
上海：世紀公園梅花相繼綻放 申城迎來最佳賞梅期
※tensorflow隨筆-tf.nn.conv2d卷積運算
※MyBatis 分頁插件的實現
TAG:程序員小新人學習 |