jquery实现鼠标拖动实现DIV排序示例代码

  • 时间:
  • 5766人关注

鼠标拖动实现DIV排序的教程有很多,在本文将为大家详细介绍个不错的示例,对比传统的排序,这是一个很不错的尝试,另外这篇文章主要知识点是关于鼠标拖动、DIV排序、jquery、的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子资料:

先上效果图:
鼠标拖动实现DIV排序示例代码 
对比传统的排序,这是一个很不错的尝试,希望对大家有启发。

大家可以参考我的上一篇博文://www.jb51.net/article/42087.htm

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" >
<div class='leftdiv' >指标:</div>
<div class="eMain" >
<input type="button" name="insert" class="selfpopup_button" onclick="addevaluate()" value="添加"> <span class="eInfo"> 注:可以通过拖动来改变指标顺序(不含任务开始时间和任务结束时间指标)。</span>
<div title="指标1" class="eBody">
<label class="eNumber">序号:1 </label>
<label >指标名称:</label><input class="eName evaluate_name eject_input_text" name="index_name_1" type="text" value="任务开始时间"/>
<label > 时限:</label> <input class="eLimit evaluate_limit eject_input_text" name="index_limit_time_1" type="text" /><span class="eMinute">分钟</span>
<label > 预警时间:</label><input class="eAlert evaluate_alert eject_input_text" name="index_alert_time_1" type="text" /><span class="eMinute">分钟</span>
</div>
<div action-type="processdiv" id="processdiv" name="processdiv" >

</div>
<div title="指标2" id="lastevaluate" class="eBody">
<div class="eNumber" id="order">序号:2</div>
<label > 指标名称:</label><input class="eName evaluate_name eject_input_text" name="index_name_2" type="text" value="任务结束时间"/>
<label > 时限:</label> <input class="eLimit evaluate_limit eject_input_text" name="index_limit_time_2" type="text" /><span class="eMinute">分钟</span>
<label > 预警时间:</label><input class="eAlert evaluate_alert eject_input_text" name="index_alert_time_2" type="text" /><span class="eMinute">分钟</span>
</div>
</div>
</div>
</li>
</ul>
</form>
</body>
</html>

JS部分:
 

//添加指标
function addevaluate(){
var n = $(".evaluate_name").size();
var html = '';
html = "<div title='"+n+"' class='eBody' id='div_"+n+"'><label class='eNumber'>序号:"+n+"</label><label style='float:left;'> 指标名称:</label><input class='eName evaluate_name eject_input_text' name='index_name_"+n+"' type='text'/>";
html += "<label style='float:left;'> 时限:</label> <input class='eLimit evaluate_limit eject_input_text' name='index_limit_time_"+n+"' type='text'/><span class='eMinute'>分钟</span>";
html += "<label style='float:left;'> 预警时间:</label><input class='eAlert evaluate_alert eject_input_text' name='index_alert_time_"+n+"' type='text'/><span class='eMinute'>分钟</span>";
html += "<input type='button' name='evaluatemove' value='移除' onclick='evaluatemove("+n+")'/></div>";
$("div[name=processdiv]").append(html);
//使div可以拖拽
$("div[name=processdiv]").sortable({
update: function (event, ui) {
evaluaterefresh();
}
});
//指标重新排序
evaluaterefresh();
}

//移除指标
function evaluatemove(n){
$("#div_"+n+"").remove();
evaluaterefresh();
}

//移除指标后重新编号
function evaluaterefresh(){
var count=$('.evaluate_name').length-2;
for(var i=0;i<count;i++){
var j = i+2;
$('div[name="processdiv"] div:eq('+i+') input:eq(0)').attr("name","index_name_"+j);
$('div[name="processdiv"] div:eq('+i+') input:eq(1)').attr("name","index_limit_time_"+j);
$('div[name="processdiv"] div:eq('+i+') input:eq(2)').attr("name","index_alert_time_"+j);
$('div[name="processdiv"] div:eq('+i+') input:eq(3)').attr("name","index_description_"+j);
$('div[name="processdiv"] div:eq('+i+')').attr("title","指标"+j);
$('div[name="processdiv"] div:eq('+i+') label:eq(0)').html("序号:"+j);
}

//给最后一条固定名称的指标设置序号
var lastcount;
if(count==0 || count=='0'){
lastcount = 2;
}else {
lastcount = count+2;
}

$('#lastevaluate input:eq(0)').attr("name","index_name_"+lastcount);
$('#lastevaluate input:eq(1)').attr("name","index_limit_time_"+lastcount);
$('#lastevaluate input:eq(2)').attr("name","index_alert_time_"+lastcount);
$('#lastevaluate input:eq(3)').attr("name","index_description_"+lastcount);
$('#lastevaluate').attr("title","指标"+lastcount);
$('#order').html('');
$('#order').html("序号:"+lastcount);
}

//保存任务类型和指标数据到数据库
function evaluatesave(){
evaluaterefresh();
var task_name=$("#sort_type").val();
var task_remark=$("#sort_remark").val();
var task_id = $("#task_id").val();
var count = $(".evaluate_name").size();
if(task_name.trim()==""||task_name.trim()==null){
jAlert("任务类型名称不能为空", "提示");
return ;
}
if(task_name.length>10){
jAlert("任务类型字数最多为10个字", "提示");
return ;
}
var evaluate_name = new Array();
var evaluate_limit = new Array();
var evaluate_alert = new Array();
var evaluate_desc = new Array();
for(var i=1;i <=count;i++){
evaluate_name[i] = $("input[name='index_name_"+i+"']").val();
if(evaluate_name[i].trim()==""||evaluate_name[i]==null){
jAlert("指标名称不能为空", "提示");
return ;
}
evaluate_limit[i] = $("input[name='index_limit_time_"+i+"']").val();
if(evaluate_limit[i].trim()==""||evaluate_limit[i]==null){
jAlert("指标时限不能为空", "提示");
return ;
}else if(isNaN(evaluate_limit[i].trim())){
jAlert("指标时限必须全是数字", "提示");
return ;
}
evaluate_alert[i] = $("input[name='index_alert_time_"+i+"']").val();
if(evaluate_alert[i].trim()==""||evaluate_alert[i]==null){
jAlert("指标预警时间不能为空", "提示");
return ;
}else if(isNaN(evaluate_alert[i].trim())){
jAlert("指标预警时间必须全是数字", "提示");
return ;
}
evaluate_desc[i] = $("input[name='index_description_"+i+"']").val();
}
var indexname = evaluate_name.join('-');
var indexlimit = evaluate_limit.join('-');
var indexalert = evaluate_alert.join('-');
var indexdesc = evaluate_desc.join('-');
$.ajax({
url:"/SortsManagement/exectute_evaluate_save",
type:"POST",
data:{
task_icon:initializationData.filepath,
task_name:task_name,
task_id:task_id,
task_remark:task_remark,
count:count,
indexname:indexname,
indexlimit:indexlimit,
indexalert:indexalert,
indexdesc:indexdesc
},
dataType:"text",
success:function(result){
if(result==1){
alert("添加成功");
sorts_list();
$.selfalerts._hide();
}else{
alert("添加不成功,请重新尝试");
return false;
}
}
});
}

css部分:
 

/*每条指标*/
.eBody{
overflow:hidden;
background:lightgray;
width:700px;
margin-left:55px;
border-radius:5px;
margin-bottom:10px;
}

.eMain{
color:#001F69;
float:left;font-family: '微软雅黑';
font-style: inherit;
font-weight: inherit;
line-height: 2.2;
margin-left: 10px;
text-align: left;
width: 550px;
}

/*使用提示语*/
.eInfo{
color:red;font-size:12px;
}
.eNumber{
float:left;
margin-left:10px;
}

.eName{
float:left;width:150px
}

.eLimit, .eAlert{
float:left;width:50px;text-align:center;
}

.eMinute{
float:left;margin-left:3px;
}

上一篇:jquery Ajax解析XML数据代码实例

下一篇:分享三种取消选中单选框radio的方法

相关内容

  • 如何解决jquery的flexigrid无法显示数据提示获取到数据问题

    升级了IE10,发现flexigrid无法显示数据,提示获取到了数据,但没任何报错任何显示,经过试验和跟踪,修改如下,有类似问题的朋友可以参考下哈

    04-19jquery的flexigrid无法显示数据提示获取到数据

    阅读更多
  • Jquery瀑布流插件的技巧用法

    瀑布流布局在目前貌似很火爆,具体的分析、原理、用到的知识等等可以看看以下几位牛人写的东西

    01-23Jquery瀑布流插件使用介绍

    阅读更多
  • 实例分享提取jquery的ready()方法

    有一些功能需求,需要在DOM载入时马上执行一些函数,但又不愿意仅为了这一个需求而引入整个JQuery库,于是就把jQuery的方法提取出来,单独使用了

    02-26提取jquery的ready()方法单独使用示例

    阅读更多
  • 详解jQuery .attr()和.removeAttr()方法操作元素属性

    本文为大家详细介绍下如何使用jQuery的.attr()和.removeAttr()方法读取,添加,修改,删除元素的属性,不会的朋友可以参考下哈,希望对大家有所帮助

    01-27jQuery .attr()和.removeAttr()方法操作元素属性示例

    阅读更多
  • jquery操作checked属性以及disabled属性的方法整理

    这篇文章主要介绍了jquery控制checked属性以及disabled属性的多种方法,下面只提到checked,其实disabled在jquery里的用法和checked是一模一样的,需要的朋友可以参考下

    06-15jquery操作checked属性以及disabled属性的多种方法

    阅读更多
  • jQuery EasyUI开发指南

    jQuery EasyUI开发指南

    使用Java开发软件的开发人员一定会接触到前端开发,而前端开发有一个流行趋势,那就是插件开发。jQuery EasyUI是目前Java Web领域流行的插件开发工具。《jQuery EasyUI开发指南》主要讲述EasyUI各种

    大小:48.4 MBjQuery

    点击下载
  • 锋利的jQuery

    锋利的jQuery

    《锋利的jQuery(第2版)》是《锋利的jQuery》升级版版,事例选用全新升级的UI,编码更合乎词义化;提升jQueryMobile的章节目录;提升jQuery版本号转变的章节目录;提升jQuery特性提升和方法的章节目

    大小:194.9 MBjQuery

    点击下载
  • jQuery UI开发指南

    jQuery UI开发指南

    《jQuery UI开发指南》 是jQuery UI的快速开发指南,全面介绍jQuery UI如何改进HTML页面展示,内容包括jQuery UI 1.8版本的下列扩展特性:选项卡管理、折叠菜单、对话框、按钮、进度条、滑块、日历

    大小:6.02 MB前端开发

    点击下载
  • jQuery实战从入门到精通

    jQuery实战从入门到精通

    本书以理论与实践相结合的方式详尽讲述了 jQuery 基础、jQueryUI、jQuerMobile 相关知识和实战开发技术,适合作为jQuery 入门、jQuery Ajax、jQuery UI、jQuery Mobile 开发及案例方面的自学用书

    大小:189.1 MBjQuery

    点击下载
  • jQuery实战

    jQuery实战

    jQuery实战(第三版) 适用于想深入学习jQuery的Web开发人员,jQuery是互联网上流行的JavaScript框架。本书的目标是希望读者成为Web高级开发人员,无论起点如何。本书深入介绍了整个jQuery框架,此外

    大小:99.0 MBjQuery

    点击下载

学习笔记

6小时47分钟前回答

jquery实现可返回拖动轨迹的拖拽实例代码

!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd html xmlns=http://www.w3.org/1999/xhtml head meta http-equiv=Content-Type content=text/html; charset=utf-8 / title完美拖拽/title style type=text/css html, body { overflow:hidden; } body, div, h2, p { margin:0; padding:0; } body { color:#fff; background:#000; font:12px/2 Arial; } p { padding:0 10px; margin-top:10px; } span { color:#ff0; padding-left:5px; } #box { position:absolute; width:300px; height:150px; background:#333; border:2px solid #ccc; top:150px; left:400px; margin:0; } #box h2 { height:25px; cursor:move; background:#222; border-bottom:2px solid #ccc; text-align:right; padding:0 10px; } #box h2 a { color:#fff; font:12px/25px Arial; text-decoration:none; outline……

29小时33分钟前回答

jquery实现鼠标拖动效果的代码

记得在之前的一个拖动层的随笔中,我实现拖动,是用的一个布尔变量,判断是否可以拖动某元素。 这两天看了一些东西,发现不需要设这个布尔变量; 实现过程: 按下鼠标的时候,给文档对象(当然也可以是别的DOM对象)的移动事件绑定一个处理函数,同时也给鼠标抬起时绑定一个解除的处理函数。 //按下鼠标并移动时(拖动),调用的函数; function startSelection(event){ } //解除移动时的处理函数; function cancelSelection() { $(document).unbind(mousemove, startSelection).unbind(mouseup, cancelSelection); } //鼠标在按下时调用的函数 function imgMouseDown(event){ $(document).mousemove(startSelection).mouseup(cancelSelection); } $img.bind(mousedown,imgMouseDown……

25小时45分钟前回答

jquery将鼠标焦点定位到文本框最后的实例代码

经测试,兼容IE8 //设置焦点相关---begin//用法:$(#txtInput).val(你好).focusEnd();$.fn.setCursorPosition = function (position) { if (this.lengh == 0) return this; return $(this).setSelection(position, position);}$.fn.setSelection = function (selectionStart, selectionEnd) { if (this.lengh == 0) return this; input = this[0]; if (input.createTextRange) { var range = input.createTextRange(); range.collapse(true); range.moveEnd(character, selectionEnd); range.moveStart(character, selectionStart); range.select(); } else if (input.setSelectionRange) { input.focus(); input.setSelectionRange(selectionStart, selectionEnd); } return this;}$.fn.focusEnd = function () { if (this.val() != undefined) { this.setCursorPosition(this.val().length); }}//设置焦点相关---end 以上就是本文……

19小时16分钟前回答

jQuery实现鼠标经过图片变亮离开变暗的效果代码

以下是完整源代码: !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtdhtml xmlns=http://www.w3.org/1999/xhtmlheadmeta http-equiv=Content-Type content=text/html; charset=utf-8 /titlejQuery实现鼠标经过图片变亮效果/titlebase target=_blank /style type=text/cssa {color:white;}body{background:#000;}body,div,ul,li,img{padding:0;margin:0; border:0; list-style:none;}.hovertreebox{width:630px; border:1px solid #ccc; margin:10px auto; overflow:hidden; padding:10px 0 0 10px;}.hovertreebox li{width:200px; height:186px; float:left; margin-right:10px; margin-bottom:10px; cursor:pointer;}/stylescript type=text/javascript src=jquery/jquery-1.11.2.min.js/scriptscript type=text/javascript$(function(){$(.hovertreebox li).mous……

29小时7分钟前回答

jQuery中multiScroll插件实现全屏鼠标滚动切换页面特效

经常看到在一些产品介绍页,看到全屏滚动的特效,今天推荐款jQuery插件给大家,jQuery全屏鼠标滚动切换页面特效插件multiScroll.js,支持众多的参数自定义配置,scrollingSpeed:切换速度、easing:动画效果、navigation:false是否出现导航,还支持事件Callback函数调用,onLeave、afterLoad等,效果还是和不错的,浏览器兼容方面:IE8, 9, Opera 12、以及现代的浏览器,需要浏览器支持CSS3属性,推荐学习和使用。 使用方法: 1.加载插件和jQuery link rel=stylesheet type=text/css href=jquery.multiscroll.css / script src=libs/jquery/1.9.1/jquery.min.js/script script src=vendors/jquery.easings.min.js/script script type=text/javascript src=jquery.multiscroll.js/script 2.HTML内容……

11小时42分钟前回答

如何用jQuery实现div随鼠标移动而移动

重点是弄清楚如何获取鼠标现位置与移动后位置,div现在位置与移动后位置: 用jQuery实现div随鼠标移动而移动,不是鼠标自身的位置!!而是div相对于之前位置的移动 代码如下:(注意看绿色部分的解释) !DOCTYPE htmlhtml head meta charset={utf-8} title/title script src=../jquery-3.2.0.js/script style .aa{ height: 100px; width: 200px; position: absolute; background-color: green; } /style /head body div class=aa/div /body/htmlscript $(.aa).mousedown(function(e){ //设置移动后的默认位置 var endx=0; var endy=0; //获取div的初始位置,要注意的是需要转整型,因为获取到值带px var left= parseInt($(.aa).css(left)); var top = parseInt($(.aa).css(top)); //获取鼠标按下时的坐标,区别于下面……

48小时54分钟前回答

jQuery实现鼠标滑过Div层背景变颜色的代码详解

本文实例讲述了jQuery实现鼠标滑过Div层背景变颜色的方法。分享给大家供大家参考。具体实现方法如下: 复制代码 代码如下: html head titlejQuery实现感应鼠标经过Div层变换图层背景颜色)/title style type=text/css .divbox{ height:300px; width:200px; background:#ffffff; border:solid 1px #ccc; float:left; margin-right:10px; } .divOver{ background:#eff8fe; border:solid 1px #d2dce3; } #zztj{color:#ffffff;} #zztj a,#zztj a:link,#zztj a:visited,#zztj a:active {color:#ffffff;} #zztj a:hover {color:#ffffff;} /style script src=/images/jquery.js/script script language=javascript $(function(){ //当鼠标滑入时将div的class换成divOver $(.divbox).hover(function(){ $(this).addClass(divOver); },function(){ //鼠标离开时移除divOver样式 ……

35小时42分钟前回答

如何使用jQuery+ajax实现鼠标单击修改内容

现有表格中的一行的代码如下所示: tr tdspan class=catid2/span/td td公司介绍/td td内部栏目/td tdspan class=listorder title=点击修改2/span/td/tr 要实现鼠标单击修改内容思路如下: 1、点击栏目排序栏目中的数字,获取同一行的第一列中的内容,即栏目id 2、隐藏栏目排序中的数字 3、在栏目排序列中插入input框,并在input框中显示栏目排序中的内容,并设置为焦点 4、修改input中的内容,失去焦点的时候提交数据,用ajax向服务器传递数据 方法为post方法 5、提交数据的时候,友好提示修改中。。。 或者等待图片 6、返回成功信息 ,重新显示修改后的内容 去掉input框 实现这一功能的jquery核心代码如下: $(.listorder).click(f……

24小时1分钟前回答

jquery选项卡鼠标延迟的插件实例代码详解

!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN http://www.w3.org/TR/html4/loose.dtd html meta http-equiv=Content-Type content=text/html; charset=utf-8 / script type=text/javascript src=js/jquery-1.7.min.js/script head title选项卡插件制作/title style type=text/css *{margin: 0;padding: 0} .tab{width: 350px;margin: 100px auto;} .tabnav li{ list-style:none;cursor:pointer;float: left;width: 80px;border: 1px solid #ccc;border-radius: 5px;margin-right: 5px; height:24px;line-height: 24px;text-align: center;} .tabnav li.cur{background:#daa520;} .tabcontent{display: none;padding: 20px;} .tabcon{border: 1px #708090 solid;background: #ffc0cb;height: 300px;clear: both;} /style /head script (function($){ $.fn.extend({ myTab:function(options){ var confings={ tabNav:,//tab导航名称 ……