原创鼠标拖动实现DIV排序

最新推荐文章于 2024-06-28 10:48:53 发布

salmonl

最新推荐文章于 2024-06-28 10:48:53 发布

阅读量5.7k

点赞数 4

分类专栏： JS回顾文章标签： jquery sortable

本文链接：https://blog.csdn.net/littlebo01/article/details/12654087

版权

该博客分享了一种使用jQuery实现的DIV元素拖动排序的方法，提供了一种不同于传统排序的交互体验。作者鼓励读者参考其前一篇文章以获取更多相关信息。

摘要由CSDN通过智能技术生成

先上效果图：

对比传统的排序，这是一个很不错的尝试，希望对大家有启发。

大家可以参考我的上一篇博文：http://blog.csdn.net/littlebo01/article/details/12620901

html部分：

<html>
  <head>
    	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	<link href="css/create.css" rel="stylesheet" type="text/css" />
	<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>  
	<script src="js/jquery-ui.js" type="text/javascript"></script>
	<script src="js/create.js" type="text/javascript"></script>
  </head>
  <body>
     <form>
       <ul>
  <li >
				<div id="liuc" style="display:block;">
					<div class='leftdiv' style="height:60px">指标：</div>
					<div class="eMain" >
						<input style="float:left;" type="button" name="insert" class="selfpopup_button" οnclick="addevaluate()" value="添加">  <span class="eInfo"> 注：可以通过拖动来改变指标顺序（不含任务开始时间和任务结束时间指标）。</span>
	    				<div title="指标1" class="eBody">
	    				    <label class="eNumber">序号：1  </label>
	    				    <label style="float:left">指标名称：</label><input class="eName evaluate_name eject_input_text" name="index_name_1" type="text" value="任务开始时间"/>
							<label style="float:left">  时限：</label>  <input class="eLimit evaluate_