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

<!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. linux如何使用QQmail实现网络邮件报警？

    环境:CentOS7 目的:考虑到实现服务的高可用性.使用电子邮件通知服务,可以快速的通知维护人员.提高服务的可靠性,而通过 smtp.qq.com 实现脚本邮件报警 一.设置并取得 smtp.qq. ...

  2. KVM虚拟迁移（5）

    一.迁移简介 迁移:      系统的迁移是指把源主机上的操作系统和应用程序移动到目的主机,并且能够在目的主机上正常运行.在没有虚拟机的时代,物理机之间的迁移依靠的是系统备份和恢复技术.在源主机上实时 ...

  3. xgboost的使用

    1.首先导入包 import xgboost as xgb 2.使用以下的函数实现交叉验证训练xgboost. bst_cvl = xgb.cv(xgb_params, dtrain, num_boo ...

  4. 【机器学习】Jackknife，Bootstraping, bagging, boosting, AdaBoosting, Rand forest 和 gradient boosting

    Jackknife,Bootstraping, bagging, boosting, AdaBoosting, Rand forest 和 gradient boosting 这些术语,我经常搞混淆, ...

  5. linux下Eclipse进行C编程时动态链接库的生成和使用

    引用 http://linux.chinaitlab.com/soft/864157.html 欢迎进入Linux社区论坛,与200万技术人员互动交流 >>进入 一.创建动态链接库1.创建 ...

  6. Maven设置阿里仓库镜像增加访问速度

    修改maven的setting.xml 在mirrors节点下面添加子节点 <mirror> <id>nexus-aliyun</id> <mirrorOf& ...

  7. layui2.5 修改layuicms

    雷哥layui2.5版本学习 学习地址: https://www.bilibili.com/video/av59813890/?p=30 注意: 修改layuicms时注意下面是缓存的js, < ...

  8. 基于VS搭建OpenCV环境

    OpenCV OpenCV的全称是Open Source Computer Vision Library,是一个跨平台的计算机视觉库.OpenCV是由英特尔公司发起并参与开发,以BSD许可证授权发行, ...

  9. 如何实现一个简化版的 jQuery

    对于操作 DOM 来说,jQuery 是非常方便的一个库,虽然如今随着 React, Vue 之类框架的流行,jQuery 用得越来越少了,但是其中很多思想还是非常值得我们学习的,这篇文章将介绍如何从 ...

  10. 3d旋转焦点图

    在线演示 本地下载