*{
margin: 0;
padding: 0;
}
.cl {
width: 100%;
margin: 0 auto;
font-family: arial, SimSun;
font-size: 0;
}
.cl .item {
display: inline-block;
width: 33%;
margin: 0 0.33% 0 0;
background-color: #ccc;
}
.cl .item1 {
background-color: #1faeff;
}
.cl .item2 {
background-color: #ff2e12;
}
.cl .item3 {
background-color: #00c13f;
}
.cl .h4 {
margin: 0;
padding: 0.5rem;
border-bottom: 1px solid #ccc;
font-size: 0.75rem;
color: #fff;
}
.cl span {
display: block;
line-height: 100px;
font-size: 2rem;
text-align: center;
color: #fff;
}
.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.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 {}
};
.prototype.dad = function(opts) {
var me, defaults, options;
me = this;
defaults = {
target: '>div',
draggable: false,
//空白提示drop here
placeholder: ' ',
callback: false,
containerClass: 'dad-container',
childrenClass: 'dads-children',
cloneClass: 'dads-children-clone',
active: true
};
options =(this).each(function() {
var mouse, target, dragClass, active, callback, placeholder, daddy, childrenClass, jQclass, cloneClass;
mouse = new O_dad();
active = options.active;
daddy =(selector).on('mouseenter', function() {
if(mouse.target != false) {
mouse.placeholder.css({
display: 'none'
});
mouse.target.css({
display: 'none'
});
(this).removeClass('active')
}).on('mouseleave', function() {
if(mouse.target != false) {
mouse.placeholder.css({
display: 'block'
});
mouse.target.css({
display: 'block'
})
}
(this).find(jQclass).each(function() {
positionArray[(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
};
(this).data('dad-id') == undefined) {
(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));
调用
<script>
('.cl').dad({
draggable: '.h4'
});
});
</script>
html
<div class="cl">
<div class="item item1">
<h4 class ="h4">标题</h4>
<span>1</span>
</div>
<div class="item item2">
<h4 class="h4">标题</h4>
<span>2</span>
</div>
<div class="item item3">
<h4 class="h4">标题</h4>
<span>3</span>
</div>
</div>