php ajax实现上移,jquery实现标签上移、下移、置顶

eg:如在后台的标签列表中，实现上移、下移、置顶功能

主要实现思路是节点操作，比如说：上移，直接把点击项移动到前一个节点，以此类推，当然实际代码实现还要加些判断，如当前点击操作项是否已经是置底或置底了，如果是则给点相应提示，好让操作者知道发生了什么事情。

思路：

1、先用到的克隆方法.clone(true):

即把当前要移动的项先保存好，备于后用。

2、找到当前标签所对应的相关元素及其相关方法：

如：.prev()当前元素上面的标签

.next()当前元素下面的标签

.after()xxx之后添加方法

.before()xxx之前添加方法

.prepend添加方法

3、实现

具体代码如：

var productsLabel = {

//设置置顶

setHot: function(t){

var bar = 'showAndHide_box';

var obj = $(t).parents('.'+bar).clone(true);

$(t).parents('.'+bar).remove();

$(".showAndHide_list_box").prepend(obj);

//设置上移

setUp: function(t){

var bar = 'showAndHide_box';

if($(t).parents('.'+ bar).prev('.'+bar).html() != undefined){

var obj = $(t).parents('.'+bar).clone(true);

$(t).parents('.'+bar).prev().before(obj);

$(t).parents('.'+bar).remove();

}else{

alert('亲，现在已是最上的哦，不能再上移了...');

}

//设置下移

setDown: function(t){

var bar = 'showAndHide_box';

if($(t).parents('.'+bar).next('.'+bar).html() != undefined){

var obj = $(t).parents('.'+bar).clone(true);

$(t).parents('.'+bar).next().after(obj);

$(t).parents('.'+bar).remove();

}else{

alert('亲，现在已是最下的哦，不能再下移了...');

}

以上就是本文给大家分享的全部内容了，希望大家能够喜欢。

本文原创发布php中文网，转载请注明出处，感谢您的尊重！

php ajax实现上移,jquery实现标签上移、下移、置顶_jquery相关推荐

Layui 设置多个穿梭框，并增加上移下移置顶置底功能
Layui 设置多个穿梭框,并增加上移下移置顶置底功能介绍针对layui穿梭框进行了一些修改,增加上移下移置顶置底功能,设置了右侧框的排序功能,按序取值,按序加载的功能. 基于layui 2.5. ...
html 浮动窗口置顶,jQuery简单实现页面元素置顶时悬浮效果示例
本文实例讲述了jQuery简单实现页面元素置顶时悬浮效果的方法.分享给大家供大家参考,具体如下: 一.JS Code: $.fn.smartFloat = function () { var posi ...
oracle上移下移置顶,[置顶] 阅读Oracle官方文档指南
[置顶] 阅读Oracle官方文档指南还在整理中.... EXPDP/IMPDP 相关文档:Utilities 2 Data Pump Export 3 Data Pump Import ...
jQuery实现表格行上移下移和置顶
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name ...
ajax搜索思路,jquery创建一个ajax关键词数据搜索实现思路
在web开发过程当中,我们经常需要在前台页面输入关键词进行数据的搜索,我们通常使用的搜索方式是将搜索结果用另一个页面显示,这样的方式对于搭建高性能网站来说不是最合适的,今天给大家分享一下如何使用 jq ...
【转】Jquery -Ajax 入门练习 Jquery.Ajax 调用后台函数，获取DataTable Json,Asp.net
直接上图=============最后拷贝源码(图片清楚) ====================================================================== ...
jquery中ajax完整例子get,jq的ajax方法，jquery中ajax完整例子
jq的ajax方法,jquery中ajax完整例子相较与js异步对象的繁琐,jq的ajax对象结构更加清晰一:ajax对象简述 ajax(Asynchronous JavaScript and X ...
Php ajax 动态下载,jQuery动态实现ajax文件下载
这次给大家带来jQuery动态实现ajax文件下载,jQuery动态实现ajax文件下载的注意事项有哪些,下面就是实战案例,一起来看一下.// Ajax 文件下载 jQuery.download = ...
java 基于jeecg-boot的公告管理——上移、下移、置顶
一.后端实体类: package org.jeecg.modules.bidding.entity;import java.io.Serializable; import java.io.Unsup ...

php ajax实现上移,jquery实现标签上移、下移、置顶_jquery

php ajax实现上移,jquery实现标签上移、下移、置顶_jquery相关推荐

最新文章

热门文章