jquery的移动节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="js/jquery-3.3.1.js"></script>
<style>
body,ul{
margin: 0;
padding: 0;
list-style: none;
}
ul{
float: left;
width: 100px;
border: 1px solid #aaa;
margin: 50px;
}
li{
margin: 10px;
text-align: center;
cursor: pointer;
}
button{
float: left;
margin: 150px 20px;
}
div{
margin: 50px auto;
height: 500px;
width: 800px;
}
.active{
background: red;
}
</style>
</head>
<body>
<div>
<ul>
<li>001</li>
<li>002</li>
<li>003</li>
<li>004</li>
<li>005</li>
<li>006</li>
<li>007</li>
<li>008</li>
<li>009</li>
<li>010</li>
</ul>
<button>--></button>
<button><--</button>
<ul>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
<li>17</li>
<li>18</li>
<li>19</li>
<li>20</li>
</ul>
</div>
<script>
$(function(){
$('ul').eq(0).find('li').click(function() {
$(this).toggleClass('active');
});
$('ul').eq(1).find('li').click(function() {
$(this).toggleClass('active');
});
$('button').eq(0).click(function() {
$('ul').eq(0).children('.active').appendTo($('ul').eq(1));
});
$('button').eq(1).click(function() {
$('ul').eq(1).children('.active').appendTo($('ul').eq(0));
});
})
</script>
</body>
</html>
实现一个小小的节点移动功能,希望自己能够在编码的道路上不断努力