类似jQuery UI的sortable效果
<!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效果 - 编程知识库
上一篇：CSS负边距自适应布局三例
您可能还会对这些文章感兴趣
2016-12-20 1,786次只会用jQuery前端到底low不low?
如果你之前没有看过我的《前端工程师如何月薪过4万》这里建议大家仔细读读一下，因为里面有整个前端工程师成长的技术路线图和我的故事。同时很多小伙伴问我的学历后来没再考考么，我是考了成考的北京航空航天大学，也马上快毕业了。不过我觉得这件事不足为提，因为国...
2016-12-17 721次jquery的$().each,$.each的区别
在jquery中，遍历对象和数组，经常会用到$().each和$.each()，两个方法。两个方法是有区别的，从而这两个方法在针对不同的操作上，显示了各自的特点。 $().each,对于这个方法，在dom处理上面用的较多。如果页面有多个input标签类型为checkbox，对于这时用$().each来...
2016-12-15 1,853次jquery加载外部文件（.txt .html)显示在网页上
在web开发中常常需要用到jquery去动态的加载文件显示在网页上面，下面是实现的小方法，希望给大家一点提示，达到抛砖引玉的作用哦！！！ 效果图： 要加载显示的文件： 网页加载效果： html代码截图： jquery代码截图： 转载请注明：jquery加载外部文件（.txt ....
2016-12-15 665次javascript实现网页倒计时
web开发中常常需要使用到网页倒计时功能，下面是实现方法： 效果图： 代码截图： 转载请注明：javascript实现网页倒计时 - 编程知识库
大家正在看
- linux 系统中Mysql 进程占用cpu过高的解决
- 二类电商是什么意思？ 二类电商有哪些？暴利二类电商还好做吗?
- 【二类电商广点通投放指南】二类电商广点通投放值不值
- 密码保护：支付宝突破微信封锁唤起支付宝代码
- Host is not allowed to connect to this MySQL server解决方法
- 密码保护：移动端js自动复制代码
- linux数据库调优，WordPress MySQL占用cpu高数据库优化
- 2017 年十大网页设计趋势
- 网页端的VR实现离我们还远么?
- 最完整的Chrome浏览器客户端调试大全
- iPhone用户人均每天遭电话骚扰1次
- 3G电子化销售服务系统
- Java WeakReference的理解与使用
- 搞清楚 Python traceback