Jquery实现Div上下移动示例

 更新时间:2014年04月23日 16:05:13   作者:  
这篇文章主要介绍了Jquery如何实现Div上下移动,需要的朋友可以参考下
复制代码 代码如下:

$(this).ready(function() {
$(".up").each(function() {
$(this).click(function() {
var $tr = $(this).parents("li");
if ($tr.index() != 0) {
$tr.prev().before($tr);
}
});
});
var trLength = $(".down").length;
$(".down").each(function() {
$(this).click(function() {
var $tr = $(this).parents("li");
if ($tr.index() != trLength) {
$tr.next().after($tr);
}
});
});
$("a[name='up']").click(function() {
if ($("input[name='rule']:checked").size() > 1) {
alert("只能选择一项进行上下移操作!");
return;
}
$("input[name='rule']:checked").each(function() {
var $div = $('#rule_' + $(this).val());
if ($div.index() != 0) {
$div.prev().before($div);
}
});
});
$("a[name='down']").click(function() {
if ($("input[name='rule']:checked").size() > 1) {
alert("只能选择一项进行上下移操作!");
return;
}
$("input[name='rule']:checked").each(function() {
var $div = $('#rule_' + $(this).val());
if ($('#rule_' + (parseInt($(this).val()) + 1)).html() != null) {
$div.next().after($div);
}
});
});
});

相关文章

  • Jquery 组合form元素为json格式,asp.net反序列化

    Jquery 组合form元素为json格式,asp.net反序列化

    Jquery组合form元素为json格式,asp.net反序列化实现代码,大家可以具体的看下面的说明。
    2009-07-07
  • jquery 操作DOM案例代码分享

    jquery 操作DOM案例代码分享

    jquery 操作DOM案例,实现图片的显示,需要的朋友可以参考下
    2012-04-04
  • jquery实现简单合拢与展开网页面板的方法

    jquery实现简单合拢与展开网页面板的方法

    这篇文章主要介绍了jquery实现简单合拢与展开网页面板的方法,通过简单的jquery页面元素样式操作实现展开与合拢面板的功能,非常简单实用,需要的朋友可以参考下
    2015-09-09
  • JQuery学习总结【一】

    JQuery学习总结【一】

    本文主要介绍了JQuery的基本知识,如:jquery内置函数,JQuery对象,Dom对象,jquery选择器,jquery的迭代,jquery的节点遍历等等,有助于对JQuery基本知识的学习与巩固。需要的朋友可以参考下
    2016-12-12
  • 基于jQuery的星级评分插件

    基于jQuery的星级评分插件

    以前写过一篇文章以jquery为基础的星星评分,今天有时间把这个功能重写,并以jQuery插件的形式出现以便以后使用。
    2011-08-08
  • 基于jQuery.Hz2Py.js插件实现的汉字转拼音特效

    基于jQuery.Hz2Py.js插件实现的汉字转拼音特效

    jQuery.Hz2Py.js插件实现的汉字转拼音是一款很实用的在线转换功能,此插件已经把汉字打包成一个插件库,调用的时间很简单,只调用一个方法就可以实现转换了
    2015-05-05
  • 超漂亮的jQuery图片轮播特效

    超漂亮的jQuery图片轮播特效

    这篇文章为大家分享了超漂亮的jQuery图片轮播特效,支持Ajax加载数据,响应式布局,支持移动端触屏,功能强大,感兴趣的小伙伴们可以参考一下
    2015-11-11
  • 基于jquery的监控数据是否发生改变

    基于jquery的监控数据是否发生改变

    在实际开发中经常会遇到数据没发生改变是,由于用户不小心点击保存,这样导致数据库的日志增大;还有数据填写好后,忘了添加保存直接关闭页面离开。
    2011-04-04
  • 基于jquery实现漂亮的动态信息提示效果

    基于jquery实现漂亮的动态信息提示效果

    这个效果是在页面头部出现的,出现一下会自动隐藏,上面有x那个提示就要手动关闭一下,其他的都是自动隐藏的!
    2011-08-08
  • JQuery悬停控制图片轮播——代码简单

    JQuery悬停控制图片轮播——代码简单

    jquery实现的鼠标悬停图片自动轮播效果,当把鼠标悬停到图片时,图像就会不断循环播放,速度非常快,效果非常逼真,就和在放武侠片一样,使用了jquery实现
    2015-08-08

最新评论