一款可增加内容和拖拽排序的列表,在输入框内输入内容后,点击加号可增加新的列表内容,拖拽每一项列表内容可以自由排序,当然啦,小伙伴们也可自行添加一下删除功能,喜欢的请收下吧。
页面的head部分需要引入两个CSS样式文件,代码如下:
<link type="text/css" rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>
<link type="text/css" rel="stylesheet" href="css/style.css">
页面的body部分,结构简单清晰,这里就不做过多介绍了,直接上代码:
<h1>可增加内容和拖拽排序的列表</h1>
<div class="adder">
<input type="text" class="input" placeholder="增加一项技能"/>
<span class="add">+</span>
</div>
<ul>
<li class="draggable" draggable="true">JavaScript</li>
<li class="draggable" draggable="true">CSS3</li>
<li class="draggable" draggable="true">HTML5</li>
<li class="draggable" draggable="true">PHP</li>
<li class="draggable" draggable="true">MySQL</li>
</ul>
页面的底部需要引入一个JS文件,主要用于增加和拖拽事件等的响应,代码如下:
<script type="text/javascript" src="js/index.js"></script>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791