可增加内容和拖拽排序的列表【原创

来源:https://www.sucaihuo.com/js/2369.html 2017-07-09 23:56浏览(1726) 收藏

一款可增加内容和拖拽排序的列表,在输入框内输入内容后,点击加号可增加新的列表内容,拖拽每一项列表内容可以自由排序,当然啦,小伙伴们也可自行添加一下删除功能,喜欢的请收下吧。
可增加内容和拖拽排序的列表
分类:表单代码 > 输入框 难易:初级
查看演示 下载资源 下载积分: 30 积分

页面的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>
声明:本文为原创文章,如需转载,请注明来源sucaihuo.com并保留原文链接:https://www.sucaihuo.com/js/2369.html
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2