jquery拖拽插件
特讨厌这种收费的插件网站（吐槽下，哈哈哈，咱们仍是要多多支持原创。）javascript
当时很是想看这个js插件，查看了下页面代码能绕过去下载资源。这位做者代码质量仍是不错的。css
jquery.dad.jshtml
/*!
* jquery.dad.js v1 (http://konsolestudio.com/dad)
* Author William Lima
*/
(function($) {
"use strict";
function O_dad() {
var self = this;
this.x = 0;
this.y = 0;
this.target = false;
this.clone = false;
this.placeholder = false;
this.cloneoffset = {
x: 0,
y: 0
};
this.move = function(e) {
self.x = e.pageX;
self.y = e.pageY;
if (self.clone != false && self.target != false) {
self.clone.css({
top: self.y - self.cloneoffset.y,
left: self.x - self.cloneoffset.x
})
} else {}
};
$(window).on('mousemove',function(e) {
self.move(e)
})
}
$.prototype.dad = function(opts) {
var me, defaults, options;
me = this;
defaults = {
target: '>div',
draggable: false,
placeholder: 'drop here',
callback: false,
containerClass: 'dad-container',
childrenClass: 'dads-children',
cloneClass: 'dads-children-clone',
active: true
};
options = $.extend({},defaults, opts);
$(this).each(function() {
//dad-active活动容器
var mouse, target, dragClass, active, callback, placeholder, daddy, childrenClass, jQclass, cloneClass;
mouse = new O_dad();
active = options.active;
daddy = $(this);
if (!daddy.hasClass('dad-active') && active == true) daddy.addClass('dad-active');
childrenClass = options.childrenClass;
cloneClass = options.cloneClass;
jQclass = '.' + childrenClass;
daddy.addClass(options.containerClass);
target = daddy.find(options.target);
placeholder = options.placeholder;
callback = options.callback;
dragClass = 'dad-draggable-area';
me.addDropzone = function(selector, func) {
$(selector).on('mouseenter',function() {
if (mouse.target != false) {
mouse.placeholder.css({
display: 'none'
});
mouse.target.css({
display: 'none'
});
$(this).addClass('active')
}
}).on('mouseup',function() {
if (mouse.target != false) {
mouse.placeholder.css({
display: 'block'
});
mouse.target.css({
display: 'block'
});
func(mouse.target);
dad_end()
}
$(this).removeClass('active')
}).on('mouseleave',function() {
if (mouse.target != false) {
mouse.placeholder.css({
display: 'block'
});
mouse.target.css({
display: 'block'
})
}
$(this).removeClass('active')
})
};
me.getPosition = function() {
var positionArray = [];
$(this).find(jQclass).each(function() {
positionArray[$(this).attr('data-dad-id')] = parseInt($(this).attr('data-dad-position'))
});
return positionArray
};
me.activate = function() {
active = true;
if (!daddy.hasClass('dad-active')) {
daddy.addClass('dad-active')
}
return me
};
me.deactivate = function() {
active = false;
daddy.removeClass('dad-active');
return me
};
$(document).on('mouseup',function() {
dad_end()
});
var order = 1;
//给目标添加 class(dads-children)
target.addClass(childrenClass).each(function() {
if ($(this).data('dad-id') == undefined) {
$(this).attr('data-dad-id', order)
}
$(this).attr('data-dad-position', order);
order++
});
function update_position(e) {
var order = 1;
e.find(jQclass).each(function() {
$(this).attr('data-dad-position', order);
order++
})
}
function dad_end() {
if (mouse.target != false && mouse.clone != false) {
if (callback != false) {
callback(mouse.target)
}
var appear = mouse.target;
var desapear = mouse.clone;
var holder = mouse.placeholder;
var bLeft = 0;
Math.floor(parseFloat(daddy.css('border-left-width')));
var bTop = 0;
Math.floor(parseFloat(daddy.css('border-top-width')));
if ($.contains(daddy[0], mouse.target[0])) {
mouse.clone.animate({
top: mouse.target.offset().top - daddy.offset().top - bTop,
left: mouse.target.offset().left - daddy.offset().left - bLeft
},300,function() {
appear.css({
visibility: 'visible'
}).removeClass('active');
desapear.remove()
})
} else {
mouse.clone.fadeOut(300,
function() {
desapear.remove()
})
}
holder.remove();
mouse.clone = false;
mouse.placeholder = false;
mouse.target = false;
update_position(daddy)
}
$("html,body").removeClass('dad-noSelect')
}
function dad_update(obj) {
if (mouse.target != false && mouse.clone != false) {
var newplace, origin;
origin = $('<span style="display:none"></span>');
newplace = $('<span style="display:none"></span>');
if (obj.prevAll().hasClass('active')) {
obj.after(newplace)
} else {
obj.before(newplace)
}
mouse.target.before(origin);
newplace.before(mouse.target);
mouse.placeholder.css({
top: mouse.target.offset().top - daddy.offset().top,
left: mouse.target.offset().left - daddy.offset().left,
width: mouse.target.outerWidth() - 10,
height: mouse.target.outerHeight() - 10
});
origin.remove();
newplace.remove()
}
}
var jq = (options.draggable != false) ? options.draggable: jQclass;
daddy.find(jq).addClass(dragClass);
daddy.find(jq).on('mousedown touchstart',function(e) {
if (mouse.target == false && e.which == 1 && active == true) {
if (options.draggable != false) {
mouse.target = daddy.find(jQclass).has(this)
} else {
mouse.target = $(this)
}
mouse.clone = mouse.target.clone();
mouse.target.css({
visibility: 'hidden'
}).addClass('active');
mouse.clone.addClass(cloneClass);
daddy.append(mouse.clone);
mouse.placeholder = $('<div></div>');
mouse.placeholder.addClass('dads-children-placeholder');
mouse.placeholder.css({
top: mouse.target.offset().top - daddy.offset().top,
left: mouse.target.offset().left - daddy.offset().left,
width: mouse.target.outerWidth() - 10,
height: mouse.target.outerHeight() - 10,
lineHeight: mouse.target.height() - 18 + 'px',
textAlign: 'center'
}).text(placeholder);
daddy.append(mouse.placeholder);
var difx, dify;
var bLeft = Math.floor(parseFloat(daddy.css('border-left-width')));
var bTop = Math.floor(parseFloat(daddy.css('border-top-width')));
difx = mouse.x - mouse.target.offset().left + daddy.offset().left + bLeft;
dify = mouse.y - mouse.target.offset().top + daddy.offset().top + bTop;
mouse.cloneoffset.x = difx;
mouse.cloneoffset.y = dify;
mouse.clone.removeClass(childrenClass).css({
position: 'absolute',
top: mouse.y - mouse.cloneoffset.y,
left: mouse.x - mouse.cloneoffset.x
});
$("html,body").addClass('dad-noSelect')
}
});
$(jQclass).on('mouseenter',function() {
dad_update($(this))
})
});
return this
}
} (jQuery));
jquery.dad.cssjava
.dad-noSelect,.dad-noSelect *{
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: -webkit-grabbing !important;
cursor: -moz-grabbing !important;
}
.dad-container{
position: relative;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.dad-container::after{
content: '';
clear: both !important;
display: block;
}
.dad-active .dad-draggable-area{
cursor: -webkit-grab;
cursor: -moz-grab;
}
.dads-children-clone{
opacity: 0.8;
z-index: 9999;
pointer-events: none;
}
.dads-children-placeholder{
overflow: hidden;
position: absolute !important;
box-sizing: border-box;
border:4px dashed #639BF6;
margin:5px;
text-align: center;
color: #639BF6;
font-weight: bold;
}
使用方法：jquery
插件描述：DAD 是一款基于 jQuery 的拖拽拖放插件，它支持常见的水平拖放、垂直拖放、多行拖放、指定拖放区域、回调函数、容许禁止拖放等等，同时你也能够稍加改造，作成相似垃圾篓、购物车等效果。web
一、引入文件app
<link rel="stylesheet" href="css/jquery.dad.css"> <script src="js/jquery.min.js"></script> <script src="js/jquery.dad.min.js"></script>
二、HTML函数
<div class="dowebok">
<div class="item item1"><span>1</span></div>
<div class="item item2"><span>2</span></div>
<div class="item item3"><span>3</span></div>
<div class="item item4"><span>4</span></div>
<div class="item item5"><span>5</span></div>
</div>
三、JavaScript网站
//简单demo
$(function(){
//拖拽初始化
$('.dowebok').dad();
//按本身需求来填写默认参数
//拖拽初始化
$('#step2').dad({target:">.item",draggable:".item >DIV.seq",callback:function(){
//拖拽完成后回调
}});
});
配置
| 属性/方法 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| target | 字符串 | >div | 要拖放的对象 |
| draggable | 布尔值 | false | 绑定拖动对象 |
| placeholder | 字符串 | drop here | 放入区域的文本占位符 |
| callback | 布尔值 | false | 拖放后的回调函数 |
| containerClass | 字符串 | dad-container | 为绑定对象增长的 class |
| childrenClass | 字符串 | dads-children | 为绑定对象的子对象增长的 class |
| cloneClass | 字符串 | dads-children-clone | 为被克隆对象增长的 class |
| active | 布尔值 | true | 默认是否可拖放 |