类似jQuery UI的sortable效果

作者：编程知识库发布：2012-11-12 分类：Jquery 阅读：1,628次

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>www.xh-css.cn</title>
<style type=”text/css”>
* { padding:0; margin:0;}
ol,li { list-style:none; }
#container { width:400px; margin:20px auto; overflow:hidden;}
#container li { float:left; margin:1px; display:inline; width:100px; height:100px; background:#ccc; font-size:40px;}
#equipment { width:600px; margin:20px auto; }
.curr { background:#080 !important;}
</style>
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js”></script>
<script type=”text/javascript”>
$(function(){
//获取所需的拖拽源
var oLi = $(“#container”).find(“li”);
//
$(“#equipment”).delegate(“.ui-state-highlight”, “mouseenter”, function (e) {
var $this = $(this),
enable = $this.attr(“enable”);
drag($this, oLi, enable);
//
return false;
});
//
$(document).delegate(“.hook”, “mouseenter”, function (e) {
var $target = $(e.target),
enable = $target.attr(“enable”);
if ($target.hasClass(“hook”)) {
drag($target, oLi, enable);
}
return false;
});
//拖拽
function drag(el, arg, type) {
var obj = el,
disX = 0,
disY = 0,
iX = 0,
iY = 0,
draggable = false,
minL,
maxL,
minT,
maxT,
opt = true;//检测碰撞优化
//
obj.each(function () {
var $this = $(this);
$this.on(“mousedown”, function (e) {
draggable = true;
disX = e.pageX – $this.offset().left;
disY = e.pageY – $this.offset().top;
//判断是不是拖动复制
if (type == 0) {
var thisobj = $(this);
} else {
var id = $this.attr(“id”),
thisobj = $this.clone().attr({
“id”:id + “_abc”,
“enable”:”0″
}).addClass(“hook”).appendTo($(“body”));
}
//
thisobj.css({
“position”: “absolute”,
“left”: $this.offset().left + “px”,
“top”: $this.offset().top + “px”,
“z-index”: “0”
});
$(document).on(“mousemove”, function (e) {
if (!draggable) return;
iX = e.pageX – disX;
iY = e.pageY – disY;
thisobj.css({
“left”: iX + “px”,
“top”: iY + “px”
});
//调用碰撞检测并优化次数
if(opt){
var near = nearest(thisobj, arg);
if (near) {
$(near).addClass(“curr”).siblings().removeClass(“curr”);
}
}
opt = !opt;
//
return false;
});
$(document).on(“mouseup”, function (e) {
var obj = $(e.target);
if (!obj.hasClass(“ui-state-highlight”)) return;
//松开鼠标复制到目标
var near = nearest(obj, arg),
hasChild = $(near).has(“img”).length;
if (near && hasChild == 0) {
oLi.removeClass(“curr”);
obj.removeAttr(“style”).appendTo($(near));
} else if (near && type == 0 && hasChild > 0) {
//取出需要更换位置的父容器和子元素
var targetBox = obj.parent(),
oriImg = $(near).find(“img”);
oLi.removeClass(“curr”);
//交换位置
obj.removeAttr(“style”).appendTo($(near));
oriImg.removeAttr(“style”).appendTo(targetBox);
}else if(!near){
oLi.removeClass(“curr”);
obj.remove();
}
//松开鼠标删除插入body的元素
draggable = false;
$(“body>.hook”).remove();
$(document).off(“mousemove mousemove mouseup”);
});
return false;
});
});
};
//碰撞检测
var detect = function (obj, target) {
var L1 = obj.offset().left,
T1 = obj.offset().top,
R1 = L1 + obj.width(),
B1 = T1 + obj.height(),
L2 = target.offset().left,
T2 = target.offset().top,
R2 = L2 + target.width(),
B2 = T2 + target.height();
//
if (L1 > R2 || R1 < L2 || T1 > B2 || B1 < T2) {
return false;
} else {
return true;
}
};
//计算两个元素的距离
var getDis = function (obj, target) {
var a = obj.offset().left – target.offset().left,
b = obj.offset().top – target.offset().top;
return Math.sqrt(a * a + b * b);
}
//计算出距离最近的那个容器
var nearest = function (obj, el) {
var hMin = 9999,
flock = -1;
//
el.each(function (index, element) {
var $this = $(this);
if (detect(obj, $this)) {
var c = getDis(obj, $this);
if (hMin > c) {
hMin = c;
flock = index;
}
}
});
//
if (flock == -1) {
return null;
} else {
return el[flock];
}
};
})
</script>
</head>
<body>
<div id=”equipment”>
<img id=”pid1″ enable=”1″ class=”ui-state-highlight” src=”http://www.xh-css.cn/wp-content/uploads/2012/05/y1-1.jpg” width=”100″ height=”100″ />
<img id=”pid2″ enable=”1″ class=”ui-state-highlight” src=”http://www.xh-css.cn/wp-content/uploads/2012/05/y1-2.jpg” width=”100″ height=”100″ />
<img id=”pid3″ enable=”1″ class=”ui-state-highlight” src=”http://www.xh-css.cn/wp-content/uploads/2012/05/y1-3.jpg” width=”100″ height=”100″ />
<img id=”pid4″ enable=”1″ class=”ui-state-highlight” src=”http://www.xh-css.cn/wp-content/uploads/2012/05/y1-4.jpg” width=”100″ height=”100″ />
<img id=”pid5″ enable=”1″ class=”ui-state-highlight” src=”http://www.xh-css.cn/wp-content/uploads/2012/05/y1-5.jpg” width=”100″ height=”100″ />
</div>
<ol id=”container”>
<li class=”ui-state-default”></li>
<li class=”ui-state-default”></li>
<li class=”ui-state-default”></li>
<li class=”ui-state-default”></li>
<li class=”ui-state-default”></li>
<li class=”ui-state-default”></li>
<li class=”ui-state-default”></li>
<li class=”ui-state-default”></li>
<li class=”ui-state-default”></li>
</ol>
</body>
</html>

转载请注明：类似jQuery UI的sortable效果 - 编程知识库

该文章由编程知识库发于2012年11月12日发表在Jquery分类下，你可以至底部留下评论。

原创文章转载请注明: 类似jQuery UI的sortable效果 | 编程知识库

关键字: jQuery sortable, jQuery UI

上一篇：CSS负边距自适应布局三例

下一篇：JavaScript判断DOM是否加载完毕

您可能还会对这些文章感兴趣

雷军22年前写的程序代码保准你没见过！

作为小米科技的创始人、董事长和首席执行官，雷军的名字如雷贯耳。上午W3Cschool发布了一篇“刘强东的代码水平如何”(有兴趣的可以点击右上角关注我们)的文章，有网友在下面回复“代码只服雷军”。这个回复吸引了W3Cschool的注...
只会用jQuery前端到底low不low?

如果你之前没有看过我的《前端工程师如何月薪过4万》这里建议大家仔细读读一下，因为里面有整个前端工程师成长的技术路线图和我的故事。同时很多小伙伴问我的学历后来没再考考么，我是考了成考的北京航空航天大学，也马上快...
UED原型设计工具Axure汉化版

Axure汉化版已经发布，版本号Axure 5.1.0.1699，下面是截图效果 Axure汉化版文件下载地址：Axure汉化补丁 Axure RP pro 5.1.0.1699 下载地址注册用户名：Axure 序列...
百度公共DNS无劫持IP 从此上网无阻

今天百度推出公共DNS服务，IP地址为180.76.76.76，号称拥有遍布全国的递归出口节点，可以做到更稳定，纯净无劫持等。 DNS在现有整个互联网基础架构中也扮演着流量”调度员”、”指引员”的角色。尽管已经有超过30年历史,DNS仍...
小伙打造网站媒体帝国月访问量4500万

　　BI中文站 6月7日报道艾默生·斯帕茨(Emerson Spartz)今年28岁，已婚，是Spartz Inc公司的首席执行官。Spartz Inc是一个网站媒体帝国，旗下的30多家网站专门发布有趣、励志和让人感到不可思议的文章和帖子，其分享量非常...