基于jQuery的拖拽效果
描述：
基于jQuery实现的拖拽插件，简单好用
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>拖拽插件</title>
</head>
<style>
* {
list-style: none;
padding: 0;
margin: 0;
}
#dragMenu {
position: relative;
width: 1400px;
margin: 0 auto;
}
#dragMenu::after{
content: '';
display: block;
clear: both;
}
li {
width: 30%;
height: 250px;
float: left;
cursor: move;
margin: 10px 5px;
}
li.active{
border: 1px solid red;
}
img {
width: 100%;
height: 100%;
display: block;
}
</style>
<body>
<ul id="dragMenu">
<li><img src="https://www.uxqr.com/background.php?1" /></li>
<li><img src="https://www.uxqr.com/background.php?2" /></li>
<li><img src="https://www.uxqr.com/background.php?3" /></li>
<li><img src="https://www.uxqr.com/background.php?4" /></li>
<li><img src="https://www.uxqr.com/background.php?5" /></li>
<li><img src="https://www.uxqr.com/background.php?6" /></li>
</ul>
</body>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
$(function (window, $) {
DragMenu.prototype.init = function () {
this.setOffset();
}
DragMenu.prototype.setOffset = function () { // 初始赋值
var _this = this;
var lis = this.getLis();
$.each(lis, function (index, item) {
var left = item.offsetLeft;
var top = item.offsetTop;
$(item).css({
left: left,
top: top
});
item.index = index;
_this.pos.push({left: left, top: top});
_this.bindEvent(item);
});
lis.css({position: 'absolute'});
}
DragMenu.prototype.getLis = function () { // 获取lis元素
return $(this.container).find('li');
}
DragMenu.prototype.getMin = function (node) { // 求出距离最近的元素
var _this = this;
var lis = this.getLis();
var index = null;
var minDis = Infinity;
for(var i = 0; i < lis.length; i ++) {
if(node === lis[i]) {continue;}
if(this.crashTest(node, lis[i])) {
var dis = this.calcDistance(node, lis[i]);
if(dis < minDis) {
minDis = dis;
index = i;
}
}
}
return lis[index];
}
DragMenu.prototype.crashTest = function (node1, node2) { // 碰撞检测
var t1 = node1.offsetTop;
var r1 = node1.offsetWidth+node1.offsetLeft;
var b1 = node1.offsetHeight+node1.offsetTop;
var l1 = node1.offsetLeft;
var t2 = node2.offsetTop;
var r2 = node2.offsetWidth+node2.offsetLeft;
var b2 = node2.offsetHeight+node2.offsetTop;
var l2 = node2.offsetLeft;
if(t1>b2||r1<l2||b1<t2||l1>r2){
return false;
}else{
return true;
}
}
DragMenu.prototype.calcDistance = function (node1, node2) { // 计算出距离
var a = node1.offsetLeft - node2.offsetLeft;
var b = node1.offsetTop - node2.offsetTop;
return Math.sqrt(Math.pow(a,2)+ Math.pow(b,2));
}
DragMenu.prototype.move = function (node, json) { // 移动
var _this = this;
node.stop().animate(json, this.options.speed, this.options.easing, function () {
$(node).css({zIndex: 0});
_this.count --;
!_this.count && typeof _this.options.animateCallback === 'function' && _this.options.animateCallback();
});
}
DragMenu.prototype.bindEvent = function (node) { // 事件绑定
var _this = this;
node.onmousedown = function (event) {
var scrollLeft = document.documentElement.scrollLeft||document.body.scrollLeft;
var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
//当鼠标按下时计算鼠标与拖拽对象的距离
_this.disX = event.clientX + scrollLeft - node.offsetLeft;
_this.disY = event.clientY + scrollTop - node.offsetTop;
document.onmousemove = function (event) {
var left = event.clientX - _this.disX + scrollLeft;
var top = event.clientY - _this.disY + scrollTop;
$(node).css({left: left, top: top, zIndex: 1});
_this.minNode = _this.getMin(node);
if(_this.minNode) {
$(_this.minNode).addClass('active').siblings().removeClass('active');
}
}
document.onmouseup = function (event) {
document.onmousemove = null;
document.onmouseup = null;
_this.getLis().removeClass('active');
var tempIndex = 0;
if(_this.minNode) {
_this.count = 2;
_this.move($(node), _this.pos[_this.minNode.index]);
_this.move($(_this.minNode), _this.pos[node.index]);
tempIndex = _this.minNode.index;
_this.minNode.index = node.index;
node.index = tempIndex;
}else {
_this.count = 1;
_this.move($(node), _this.pos[node.index]);
}
}
_this.getMin(node);
return false;
}
}
function DragMenu(options) {
this.options = {
container: '#container',
easing: 'swing',
speed: 500,
animateCallback: function () {
}
}
this.options = $.extend({}, this.options, options);
this.container = this.options.container;
this.disX = 0;
this.disY = 0;
this.minZIndex = 0;
this.minNode = null;
this.pos = [];
}
$.fn.extend({
dragMenu: function (options) {
options = options || {}
options["container"] = this;
new DragMenu(options).init();
}
});
}(window, jQuery));
$('#dragMenu').dragMenu();
</script>电脑在线的朋友可以直接点击上面的【运行代码】查看特效
使用说明
| 属性 | 说明 | 类型 | 默认值 |
| container | 需要拖拽功能的容器 | String | #container |
| easing | 动画效果 | String | swing |
| speed | 动画执行完成的时间 | Number | 500 |
| animateCallback | 动画执行完成的回调函数 | Function | functoin() {} |
版权声明：本文由 LzxBlog 发布，如需转载请注明出处。
赞助云储存