1.所實作的功能： 先選擇存放的容器（點一下紅色div獲取到id），然后點擊【移動按鈕 】把綠色div整個移動到紅色div里面，到這里能實作功能。
2.問題：但是我想把移動后的那個綠色div再次移動回原來的框中，這里就遇到問題。點了移動按鈕沒有反應。請各位給看看哪里出錯了 謝謝
代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<title>可移動的div</title>
<style>
#div1 {
height: 300px;
width: 200px;
background-color: red;
margin: 5px;
float: left;
text-align: center;
}
#div2_0 {
height: 150px;
width: 150px;
background-color: green;
margin-top: 10px;
border: 1px solid rgb(20, 20, 20);
}
#box {
width: 950px;
height: 900px;
border: rgb(7, 7, 7) solid 1px;
margin: 0 auto;
/* padding-left: 10px; */
}
#left_list {
width: 220px;
height: 800px;
background-color: chartreuse;
margin: 10px;
float: left;
}
#center_list {
width: 650px;
height: 800px;
background-color: burlywood;
float: left;
margin: 10px;
}
</style>
</head>
<body>
<div id="box">
<div id="left_list">
<div id="div2_0">
<p>需要移動的div2_0</p>
<input type="button" value="https://bbs.csdn.net/topics/移動按鈕" onclick="moveHtml(this);" />
</div>
</div>
<div id="center_list">
<div id="div1">
<p>存盤移動的容器div1</p>
</div>
</div>
</div>
<script>
//點擊頁面元素獲取點擊元素的id
$(document).click(function (e) {
v_id = "#" + e.target.id;
console.log(v_id);
});
//移動元素到所選擇的div內部
function moveHtml(obj) {
var btn = "#" + $(obj).parent().attr('id');
var outHtml = $(btn).prop("outerHTML");
$(v_id).append(outHtml);
$(btn).remove(); //洗掉原來的html
}
</script>
</body>
</html>
uj5u.com熱心網友回復：
<script>
var v_dom;
//點擊頁面元素獲取點擊元素的id
$(document).click(function (e) {
v_dom = e.target;
console.log(v_dom.id);
});
//移動元素到所選擇的div內部
function moveHtml(obj) {
var btn = $(obj).parent();
$(v_dom).append(btn);
}
</script>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/43852.html
標籤：JavaScript
上一篇：怎么把物件里面的數值取出來
下一篇：Git,求大佬幫忙理一下分支