节点移动
主要是练习(JQuery)
示例代码
HTML
<h3>节点移动</h3>
<div id="container">
<!-- 左边 -->
<div id="leftmobile">
<ul id="leftmobile1_1">
<li>关羽</li>
<li>张飞</li>
<li>诸葛亮</li>
<li>刘备</li>
<li>曹操</li>
<li>赵云</li>
<li>黄忠</li>
<li>周瑜</li>
<li>曹植</li>
<li>孙权</li>
<li>马超</li>
<li>孙尚香</li>
</ul>
</div>
<!-- 中间按钮 -->
<div id="middlebutton">
<button id="rightshift">点击右移</button>
<button id="allrightshift">点击全右</button>
<button id="leftshift">点击左移</button>
<button id="allleftshift">点击全左</button>
<button id="moveupward">点击上移</button>
<button id="movedown">点击下移</button>
</div>
<!-- 右边 -->
<div id="rightmobile">
<ul id="rightmobile2_2">
<!-- <li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li> -->
</ul>
</div>
</div>
CSS(样式)
<style>
#container {
width: 800px;
height: 500px;
border: 1px dashed rgb(187, 176, 176);
display: flex;
justify-content: space-between;
margin: 0 auto;
margin-top: 4px;
border-radius: 14px;
}
#leftmobile {
width: 140px;
height: 300px;
border: 1px solid rgb(187, 176, 176);
margin-top: 94px;
margin-left: 220px;
}
#middlebutton {
margin-top: 94px;
height: 300px;
width: 80px;
border: 1px solid rgb(187, 176, 176);
}
#middlebutton>button {
display: flex;
margin-top: 23px;
}
button {
margin-left: 5px;
border-radius: 10px;
outline: none;
background-color: rgb(255, 255, 255);
}
#rightmobile {
width: 140px;
height: 300px;
border: 1px solid rgb(187, 176, 176);
margin-top: 94px;
margin-right: 220px;
}
#leftmobile1_1 {
overflow: scroll;
}
#rightmobile2_2 {
overflow: scroll;
}
.insidename {
background-color: aqua;
}
h3 {
width: 800px;
margin: 0 auto;
border: 1px dashed rgb(187, 176, 176);
text-align: center;
margin-top: 46px;
font-size: 24px;
color: rgb(94, 8