拖动元素，将改元素插入到某个元素前/后，并返回当前所在的位置的索引值，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="js/jquery-1.8.2.min.js"></script>
<style>
*{ margin:0; padding:0; }
ul,li{ list-style:none; }
.mydiv{ overflow:hidden; zoom:1; width:450px; }
.mydiv:after{ clear:both; content:""; overflow:hidden; display:block; height:0; width:0; }
.mydiv .item,.js-dragFun-item{ float:left; background:#eee; border:1px solid #ccc; text-align:center; font-size:20px; font-weight:bold; width:100px; height:100px; margin:10px; }
.mydiv .js-downOn{ border:1px solid #a00; }
</style>
</head>
<body>
<div class="mydiv">
<ul>
<li class="item js-dragFun-item"><span>1</span>:1</li>
<li class="item js-dragFun-item"><span>2</span>:2</li>
<li class="item js-dragFun-item"><span>3</span>:3</li>
<li class="item js-dragFun-item"><span>4</span>:4</li>
<li class="item js-dragFun-item"><span>5</span>:5</li>
<li class="item js-dragFun-item"><span>6</span>:6</li>
<li class="item js-dragFun-item"><span>7</span>:7</li>
<li class="item js-dragFun-item"><span>8</span>:8</li>
</ul>
</div>
<script>
;(function($){//拖动换位置
$.fn.dragFun = function(opt,n){
'use strict';
if(typeof(opt) === "function"){
n = opt;
opt = {};
}
var cfg = $.extend({
item: ".js-dragFun-item",
startX: 0,
startY: 0,
pLft: 0,
pTop: 0,
_target: null
},opt || {});
var _this = this;
var $t = $(this);
var items = $t.find(cfg.item);
var tw = items.outerWidth(true);
var th = items.height();
var pointX = 0,pointY = 0;
var inx = 0;
var $doc = $(document);
var pLft = $t.offset().left || cfg.pLft;//当前元素距左侧距离
var pTop = $t.offset().top || cfg.pTop;//当前元素距顶部距离
;(function(){
$t.css("position","relative");
items.attr({'onselectstart':'return false;','unselectable':'no'});
items.css({'-moz-user-select':'none','-webkit-user-select':'none','user-select':'none'});
})();
function _position(clientx,clienty,items){
var endX = 0,endY = 0,num = 0;
for(var i=0; i<items.length-1; i++){
endX = items.eq(i).offset().left;
endY = items.eq(i).offset().top;
if(endX<clientx && (endX+tw)>clientx && endY<clienty && (endY+th)>clienty){
num = i;
}
}
if(cfg.startX > clientx){
return num;
}else{
return num+1;
}

}
$t.on("mousedown",cfg.item,function(e){
e.stopPropagation();
var self = $(this);
cfg.startX = (e.clientX || window.event.clientX) - pLft;
cfg.startY = (e.clientY || window.event.clientY) - pTop;
pointX = cfg.startX - self.offset().left;
pointY = cfg.startY -self.offset().top;
inx = self.index();
cfg._target = self.clone();
self.addClass("js-downOn");
cfg._target.css({"position":"absolute","left":(cfg.startX-pointX)+"px","top":(cfg.startY-pointY)+"px","opacity":0.8});
$t.append(cfg._target);
$doc.on("mousemove",function(e){
e.stopPropagation();
cfg._target.css({"left":((e.clientX || window.event.clientX)-pLft-pointX)+"px","top":((e.clientY || window.event.clientY)-pTop-pointY)+"px"});
})
});
$doc.on("mousedown","*",function(e){
cfg.startX = (e.clientX || window.event.clientX) - pTop;
cfg.startY = (e.clientY || window.event.clientY) - pTop;
});
$doc.on("mouseup","*",function(e){
e.stopPropagation();
var clientx = (e.clientX || window.event.clientX) - pLft;
var clienty = (e.clientY || window.event.clientY) - pTop;
var items = $t.find(cfg.item);
var num = _position(clientx,clienty,items);//当前元素索引
cfg._target? cfg._target.remove() : "";
items.eq(inx).removeClass("js-downOn");
if(num === inx || (cfg.startX === clientx && cfg.startY === clienty)){
return;
}
var reNum = items.eq(num);
items.eq(inx).insertBefore(reNum);
if(n){
n.call(_this,num);//num：目标索引;
}
});
return this;
}
})(jQuery);
$(".mydiv ul").dragFun(function(a){
var liDom = $(this).find("li.js-dragFun-item");
for(var i=a; i<liDom.length; i++){
liDom.eq(i).find("span").html(i+1);
}
});
</script>
</body>
</html>

拖动元素，自由变换位置 jquery的更多相关文章

  1. 拖动元素调换位置——sortable.js

    使用简介: https://github.com/SortableJS/Sortable https://segmentfault.com/a/1190000008209715 /**! * Sort ...

  2. 通过jquery获得某个元素的位置, 透明div, 弹出框, 然后在旁边显示toggle子级联菜单-hover的bug解决

    jquery的"筛选选择器", 都是用冒号开头的, 即, 冒号选择器就是 筛选选择器.如: :first, :last, :eq(index), :first-child,...等 ...

  3. js进阶 11-8 jquery如何获取元素相对于父元素的位置

    js进阶 11-8  jquery如何获取元素相对于父元素的位置 一.总结 一句话总结:用jquery的position方法,但是使用这个方法的前提是父元素相对定位,子元素绝对定位,否则和offset ...

  4. js进阶 11-7 jquery如何获取和改变元素的位置

    js进阶 11-7  jquery如何获取和改变元素的位置 一.总结 一句话总结:jquery中匿名函数中的index参数是什么意思.jquery对象多集合,故index为所选元素的下标. 1.jqu ...

  5. Jquery获取元素的位置

    $(".curr_play").position().left //元素距离父级元素左侧位置 $(".curr_play").offset().left //元 ...

  6. jQuery 获取元素当前位置offset()与position()

    <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8& ...

  7. jquery操作元素的位置

    .offset() 在匹配的元素中,获取第一个元素的当前坐标,或设置每一个元素的坐标,坐标相对于文档. .offset() 这个不接受任何参数. var offset = p.offset(); // ...

  8. JavaScript 实现鼠标拖动元素

    一.前言 最开始实现鼠标拖动元素的目的就是在一个页面上拖动很多小圆点,用于固定定位,然后在复制HTML,粘贴在页面的开发代码中,就是这么一个功能,实现了很多遍,都没有做好,不得已采用了jQuery.f ...

  9. Wpf 鼠标拖动元素实例

    1.Wpf中鼠标捕获和释放 //以矩形为例 //创建鼠标捕获 Mouse.Capture(rectOne); //释放鼠标捕获 rectOne.ReleaseMouseCapture(); 2.Wpf ...

随机推荐

  1. 进程，多进程，进程与程序的区别，程序运行的三种状态，multiprocessing模块中的Process功能，和join函数,和其他属性，僵尸与孤儿进程

    1.进程 什么是进程: 一个正在被运行的程序就称之为进程,是程序具体执行的过程,是一种抽象概念,进程来自操作系统 2.多进程  多个正在运行的程序 在python中实现多线程的方法 from mult ...

  2. yum安装telnet如何开启telnet服务

    1.# yum  install  -y  telnet  telnet-server  xinetd   (其中telnet-server是由xinetd管理的,所以得下载xinetd服务) 2.修 ...

  3. virtualenv以及virtualenvwrapper的安装和使用

    Virtualenv 安装 安装前最好保证pip为最新版本: python -m pip install -U pippip install virtualenv 创建新的环境 virtualenv ...

  4. 【Spring Cloud】Spring Cloud使用总结

    项目概要 项目环境信息 IDEA ultimate 2018.3.2 springboot 2.1.7.RELEASE springCloud Greenwich.SR2 Eureka 介绍 基于ne ...

  5. Python学习【day03】- Python基础练习题(列表、元组、字典)

    #!/usr/bin/env python # -*- coding:utf8 -*- # 1.有两个列表 # l1 = [11,22,33] # l2 = [22,33,44] # a.获取内容相同 ...

  6. axios模块封装和分类列表实现

    这个作用 主要还是为了让代码更加的,清晰. 不要全部都放到  created(){}  这个方法下面.把这些代码全部抽离出去. 这里就只是去调用方法.1. src 目录下,新建文件夹---  rest ...

  7. 外贸开发，用java调用速卖通api第一步，token的获取。

     第一步 定义速卖通api的常量  public String client_id;  public String client_key;  public String site;   第二步 获取登 ...

  8. try catch和finally

    在C#中这三个关键字用于处理异常. 这三个关键字try是必定要用的,要不然就失去了意义.然后catch和finally可以不用但是要注意遵循原则. 存在一个或多个catch的时可以不用finally, ...

  9. Tomcat 设置80端口

    1:修改tomcat配置 vi /usr/local/tomcat/conf/server.xml 找到 Connector port="8080" protocol=" ...

  10. ubuntu 16.04下ssh访问提示错误

    liuyan@ubuntu:/etc/init.d$ sudo apt-get install openssh-server -yReading package lists... DoneBuildi ...