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

<!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. U盘安装win7"安装程序无法创建新的系统分区" 怎么办

     装WIN7的朋友,不知遇到该类问题没有: 当我们通过PE进行WIN7 纯安装的时候(非ghost安装),系统提示”安装程序无法创建新的系统分区,也无法定位现有分区“,迫使我们操作终断,无法进行. 面 ...

  2. python3.6调用c语言动态编译文件 c语言编译可执行文件和动态编译等

    1.c的代码 dfunc.c #include<stdio.h> int dgfunc(int n) { ){ ; }else{ )+dgfunc(n-); } } 2.动态编译 cmd ...

  3. 【VS开发】【DSP开发】TCP和UDP数据包结构

    TCP (Transport Control Protocol)传输控制协议: 1.TCP数据包的分组格式: A,源端口:标识源端应用进程. B, 目的端口:标识目的端应用进程. C, 序号:在SYN ...

  4. 浅谈Angularjs至Angular2后内置指令的变化

    一.科普概要说明 我们常说的 Angular 1 是指 AngularJS: 从Angular 2 开始已经改名了.不再带有JS,只是单纯的 Angular: Angular 1.x 是基于JavaS ...

  5. IIS写权限漏洞和XFF刷票原理

    IIS写权限漏洞 PUT写入漏洞 此漏洞主要是因为服务器开启了webdav的组件导致的 1.扫描漏洞,yes,可以PUT: 2.用老兵的工具上传一句话文件test.txt,然后move改名为shell ...

  6. [python] 执行 dos 命令

    python的os模块 os模块调用CMD命令有两种方式:os.popen(),os.system(). 都是用当前进程来调用. os.system是无法获取返回值的.当运行结束后接着往下面执行程序. ...

  7. 云数据库RDS MySQL 版

    阿里云关系型数据库(Relational Database Service,简称RDS)是一种稳定可靠.可弹性伸缩的在线数据库服务.基于阿里云分布式文件系统和SSD盘高性能存储,RDS支持MySQL. ...

  8. CSS(下)

    目录 CSS(下) CSS属性相关 宽和高 字体属性 背景属性 边框 border-radius display属性 CSS盒子模型 margin外边距 padding内填充 浮动(float) 限制 ...

  9. Linux-2.1vim简单使用

    1.用vim打开文件,文件内容显示在终端,命令模式无法编辑 vim 1.txt vi 1.txt 2.使用a,i,o,shift+o编辑文件,按Esc退出编辑模式 i 插入在光标前 a 插入在光标后 ...

  10. Codeforces 1221D. Make The Fence Great Again

    传送门 容易想到 $dp$,但是如果直接设 $f[i][j]$ 表示修正完前 $i$ 个位置,第 $i$ 个位置增加了 $j$ 高度显然是不行的 考虑有性质,发现每个位置只会被左右两个位置影响而改变, ...