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

<!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. 【VS开发】PCIe体系结构的组成部件

    PCIe总线作为处理器系统的局部总线,其作用与PCI总线类似,主要目的是为了连接处理器系统中的外部设备,当然PCIe总线也可以连接其他处理器系统.在不同的处理器系统中,PCIe体系结构的实现方法略有不 ...

  2. SqlService 数据操作

    存储过程: if exists(select * from sysobjects where name='proce_name') drop procedure proce_name go creat ...

  3. 题目---汉诺塔及AI代码及八皇后

    2019春第十一周作业 这个作业属于那个课程 C语言程序设计II 这个作业要求在哪里 https://edu.cnblogs.com/campus/zswxy/software-engineering ...

  4. windows 安装 celery 避坑指南，看这篇就够了

  5. __metaclass__方法

    metaclass这个属性叫做元类,它是用来表示这个类是由谁来帮他实例化创建的,说白了,就是相当于自己定制一个类. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 ...

  6. CE修改器使用教程 [入门篇]

    Cheat Engine 一般简称CE,是一个开放源代码的作弊软件,其功能包括:内存扫描.十六进制编辑器.调试工具,Cheat Engine 自身附带了外挂制作工具,可以用它直接生成外挂工具,CE可以 ...

  7. O003、准备 KVM 实验环境

    参考https://www.cnblogs.com/CloudMan6/p/5240770.html   KVM 是 OpenStack 使用的最广泛的Hypervisor,本节介绍如何搭建 KVM  ...

  8. springboot的一些注解

    springboot注解以及一些晦涩难理解的点介绍 @Validated 用于注入数值校验的注解(JSR303数据校验) @PropertySource 用于加载指定的配置文件,例如@Property ...

  9. css之盒模型（box,box-shadow,overflow,BFC）

    一.盒模型的概念 CSS中每一个元素都是一个盒模型(Box Model),包括HTML和body标签元素.一般称之为box model.它的本质就是一个盒子,它的属性有margin,border,pa ...

  10. jq上滑加载更多

    html 结构 <div id="main"> <ul class="order-list" id="list_box"& ...