您的位置：前端开发>jquery>类似jQuery UI的sortable效果

类似jQuery UI的sortable效果

作者：前端开发 发布：2012-11-12 分类：jquery 阅读：1,596次

<!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效果 | 前端开发

关键字: ,

上一篇：

下一篇：

为您推荐

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

  • 2012-11-216套精美的jQuery UI主题

    jQuery UI 是官方推出的 jQuery 用户界面库，包含底层用户交互组件（日历，选项卡，滑块，手风琴，进度条，弹窗等等），Web 开发人员可以直接用它来构建具有良好交互体验的 Web 应...

  • 2011-04-20jQuery旋转木马

    所有复杂的特效，我都习惯用firebug去查看它的DOM结构，来查看DOM结构的变化情况。 我观察到的DOM结构和实际的DOM结构有点差别，这就意味着有些初始化的脚本在运作。最主要的差别...

  • 2016-12-20只会用jQuery前端到底low不low?

    如果你之前没有看过我的《前端工程师如何月薪过4万》这里建议大家仔细读读一下，因为里面有整个前端工程师成长的技术路线图和我的故事。同时很多小伙伴问我的学历后来没再考考么，...

  • 2016-12-17jquery的$().each,$.each的区别

    在jquery中，遍历对象和数组，经常会用到$().each和$.each()，两个方法。两个方法是有区别的，从而这两个方法在针对不同的操作上，显示了各自的特点。 $().each,对于这个方法，在d...

  • 2016-12-15jquery加载外部文件（.txt .html)显示在网页上

    在web开发中常常需要用到jquery去动态的加载文件显示在网页上面，下面是实现的小方法，希望给大家一点提示，达到抛砖引玉的作用哦！！！ 效果图： 要加载显示的文件： 网页加载...

  • 2016-12-15javascript实现网页倒计时

    web开发中常常需要使用到网页倒计时功能，下面是实现方法： 效果图： 代码截图：

  • 2016-12-15jquery判断浏览器类型最新方法

    web开发中常常需要去判断浏览器的类型来做出对应得调整设置，这时我们就需要学会判断绝大多数的浏览器类型。jquery在1.9之后便取消了$.browser用$.support取而代之，今天就来告诉...

  • 2016-12-15jquery点击返回页面头部滑动动画

    web开发中我们常常用点击返回头部的效果，下面我们就贴出代 码，共大家参考哈 代码截图： 说明：

  • 2016-12-15jQuery实现文字闪烁特效

    今天给大家介绍一个小特效–文字闪烁，web开发网页中常常使用到哦！ 效果截图： 代码截图：

  • 2016-12-15jQuery中的clone的使用方法

    clone：官方的解释是克隆匹配的DOM元素并且选中这些克隆的副本。如果想克隆DOM元素绑定的所有事件，可采用clone(true)，JQ1.5版本以上默认为false。 具体怎么用？ 先举例一个小例...

猜你喜欢

大家正在看

阅读排行榜

热门标签

手机浏览器兼容 郑州前端开发 jquery插件 jquery jquery特效 css div 3g网 web前端开发 css bug 郑州网页设计 前端开发 web规范 网页设计 wap网站开发 手机网站制作 jquery实例 css经验 手机网站开发

本月热门

www.wufangbo.com 前端开发-WEB前端开发-专业前端开发网站

郑州前端开发 | web前端开发 | 郑州页面重构 | 前端开发-WEB前端开发-专业前端开发网站 站点地图 关于我