拖动元素，将改元素插入到某个元素前/后，并返回当前所在的位置的索引值，代码如下：
<!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>
4469
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
