带删除功能:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>拖拽插件jquery.dad.js</title> <style type="text/css">.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;}.dad-draggable-area>*,.dad-draggable-area img{pointer-events: none;}.dads-children.active{pointer-events: none;}.dads-children-clone{opacity: 1;z-index: 9999;pointer-events: none;}.dads-children-placeholder{pointer-events: none;overflow: hidden;position: absolute !important;box-sizing: border-box;border:4px dashed #639BF6;margin:5px;text-align: center;color: #639BF6;font-weight: bold;} .daddy>div {box-sizing: border-box;width: 20%;padding: 5px;float: left;display: block;position: relative;}.daddy>div>div {display: block;height: 120px;line-height: 120px;text-align: center;font-size: 30px;font-weight: bold;background: #639BF6;color: white;font-family: "Arial", sans-serif;}.m-delete{pointer-events: auto;}</style></head> <body> ccs文件和js文件可以去GitHub上下载，下载地址是：/williammustaffa/jquery.dad.js本实例是直接把源代码都复制过来了<div id="daddy" class="dad daddy"><div><div>1</div><input type="button" value="删除" class="m-delete js-delete"></div><div><div>2</div><input type="button" value="删除" class="m-delete js-delete"></div><div><div>3</div><input type="button" value="删除" class="m-delete js-delete"></div><div><div>4</div><input type="button" value="删除" class="m-delete js-delete"></div><div><div>5</div><input type="button" value="删除" class="m-delete js-delete"></div></div><script src="/jquery/3.2.1/jquery.js"></script> <!-- <script src='jquery.dad.js'></script> --><script type="text/javascript">/*!* jquery.dad.js v1 (/dad)* Author William Lima*/(function ($) {'use strict';var supportsTouch = 'ontouchstart' in window || navigator.msMaxTouchPoints;$.fn.dad = function (opts) {var _this = this;var defaults = {target: '>div',draggable: false,placeholder: '',callback: false,containerClass: 'dad-container',childrenClass: 'dads-children',cloneClass: 'dads-children-clone',active: true,};var options = $.extend({}, defaults, opts);$(this).each(function () {var active = options.active;var $daddy = $(this);var childrenClass = options.childrenClass;var cloneClass = options.cloneClass;var jQclass = '.' + childrenClass;var $target = $daddy.find(options.target);var placeholder = options.placeholder;var callback = options.callback;var dragClass = 'dad-draggable-area';var holderClass = 'dads-children-placeholder';// HANDLE MOUSEvar mouse = {x: 0,y: 0,target: false,clone: false,placeholder: false,cloneoffset: {x: 0,y: 0,},updatePosition: function (e) {this.x = e.pageX;this.y = e.pageY;},move: function (e) {this.updatePosition(e);if (this.clone !== false && _this.target !== false) {this.clone.css({left: this.x - this.cloneoffset.x,top: this.y - this.cloneoffset.y,});}},};$(window).on('mousemove touchmove', function (e) {var ev = e;if (mouse.clone !== false && mouse.target !== false) e.preventDefault();if (supportsTouch && e.type == 'touchmove') {ev = e.originalEvent.touches[0];var mouseTarget = document.elementFromPoint(ev.clientX, ev.clientY);$(mouseTarget).trigger('touchenter');}mouse.move(ev);});$daddy.addClass(options.containerClass);if (!$daddy.hasClass('dad-active') && active === true) {$daddy.addClass('dad-active');};_this.addDropzone = function (selector, func) {$(selector).on('mouseenter touchenter', function () {if (mouse.target !== false) {mouse.placeholder.css({ display: 'none' });mouse.target.css({ display: 'none' });$(this).addClass('active');}}).on('mouseup touchend', function () {if (mouse.target != false) {mouse.placeholder.css({ display: 'block' });mouse.target.css({ display: 'block' });func(mouse.target);dadEnd();};$(this).removeClass('active');}).on('mouseleave touchleave', function () {if (mouse.target !== false) {mouse.placeholder.css({ display: 'block' });mouse.target.css({ display: 'block' });}$(this).removeClass('active');});};// GET POSITION FUNCTION_this.getPosition = function () {var positionArray = [];$(this).find(jQclass).each(function () {positionArray[$(this).attr('data-dad-id')] = parseInt($(this).attr('data-dad-position'));});return positionArray;};_this.activate = function () {active = true;if (!$daddy.hasClass('dad-active')) {$daddy.addClass('dad-active');}return _this;};// DEACTIVATE FUNCTION_this.deactivate = function () {active = false;$daddy.removeClass('dad-active');return _this;};// DEFAULT DROPPING$daddy.on('DOMNodeInserted', function (e) {var $thisTarget = $(e.target);if (!$thisTarget.hasClass(childrenClass) && !$thisTarget.hasClass(holderClass)) {$thisTarget.addClass(childrenClass);}});$(document).on('mouseup touchend', function () {dadEnd();});// ORDER ELEMENTSvar order = 1;$target.addClass(childrenClass).each(function () {if ($(this).data('dad-id') == undefined) {$(this).attr('data-dad-id', order);}$(this).attr('data-dad-position', order);order++;});// CREATE REORDER FUNCTIONfunction updatePosition(e) {var order = 1;e.find(jQclass).each(function () {$(this).attr('data-dad-position', order);order++;});}// END EVENTfunction dadEnd() {if (mouse.target != false && mouse.clone != false) {if (callback != false) {callback(mouse.target);}var appear = mouse.target;var desappear = mouse.clone;var holder = mouse.placeholder;var bLeft = 0;var bTop = 0;// Maybe we will use this in the future//Math.floor(parseFloat($daddy.css('border-left-width')));//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');desappear.remove();});} else {mouse.clone.fadeOut(300, function () {desappear.remove();});}holder.remove();mouse.clone = false;mouse.placeholder = false;mouse.target = false;updatePosition($daddy);}$('html, body').removeClass('dad-noSelect');}// UPDATE EVENTfunction dadUpdate(obj) {if (mouse.target !== false && mouse.clone !== false) {var $origin = $('<span style="display:none"></span>');var $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);// UPDATE PLACEHOLDERmouse.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();}}// GRABBING EVENTvar jq = (options.draggable !== false) ? options.draggable : jQclass;$daddy.find(jq).addClass(dragClass);$daddy.on('mousedown touchstart', jq, function (e) {var isDelete = $(e.target).hasClass('js-delete');if(isDelete) {return;}// For touchstart we must update "mouse" positionif (e.type == 'touchstart') {mouse.updatePosition(e.originalEvent.touches[0]);}if (mouse.target == false && active == true && (e.which == 1 || e.type == 'touchstart')) {var $self = $(this);// GET TARGETif (options.draggable !== false) {mouse.target = $daddy.find(jQclass).has(this);} else {mouse.target = $self;}// ADD CLONEmouse.clone = mouse.target.clone();mouse.target.css({ visibility: 'hidden' }).addClass('active');mouse.clone.addClass(cloneClass);$daddy.append(mouse.clone);// ADD PLACEHOLDERvar $placeholder = $('<div></div>');mouse.placeholder = $placeholder;mouse.placeholder.addClass(holderClass);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);// GET OFFSET FOR CLONEvar bLeft = Math.floor(parseFloat($daddy.css('border-left-width')));var bTop = Math.floor(parseFloat($daddy.css('border-top-width')));var difx = mouse.x - mouse.target.offset().left + $daddy.offset().left + bLeft;var dify = mouse.y - mouse.target.offset().top + $daddy.offset().top + bTop;mouse.cloneoffset.x = difx;mouse.cloneoffset.y = dify;// REMOVE THE CHILDREN DAD CLASS AND SET THE POSITION ON SCREENmouse.clone.removeClass(childrenClass).css({position: 'absolute',top: mouse.y - mouse.cloneoffset.y,left: mouse.x - mouse.cloneoffset.x,});// UNABLE THE TEXT SELECTION AND SET THE GRAB CURSOR$('html,body').addClass('dad-noSelect');}});$daddy.on('mouseenter touchenter', jQclass, function () {dadUpdate($(this));});});return this;};})(jQuery); </script> <script type="text/javascript"> $(function () {var myAction = {};var dom = {dad: $('#daddy'),delete: $('.js-delete')}$.extend(myAction, {initDad: function () {dom.dad.dad();},initEvent: function () {dom.delete.on('click', function () {var that = $(this);that.parent().remove();}); }});var init = function () {myAction.initDad();myAction.initEvent();}();}); </script> </body> </html>
不带删除功能：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>拖拽插件jquery.dad.js</title> <style type="text/css">.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;}.dad-draggable-area>*,.dad-draggable-area img{pointer-events: none;}.dads-children.active{pointer-events: none;}.dads-children-clone{opacity: 1;z-index: 9999;pointer-events: none;}.dads-children-placeholder{pointer-events: none;overflow: hidden;position: absolute !important;box-sizing: border-box;border:4px dashed #639BF6;margin:5px;text-align: center;color: #639BF6;font-weight: bold;} .daddy>div {box-sizing: border-box;width: 20%;padding: 5px;float: left;display: block;position: relative;}.daddy>div>div {display: block;height: 120px;line-height: 120px;text-align: center;font-size: 30px;font-weight: bold;background: #639BF6;color: white;font-family: "Arial", sans-serif;}</style></head> <body> ccs文件和js文件可以去GitHub上下载，下载地址是：/williammustaffa/jquery.dad.js本实例是直接把源代码都复制过来了<div id="daddy" class="dad daddy"><div><div>1</div></div><div><div>2</div></div><div><div>3</div></div><div><div>4</div></div><div><div>5</div></div></div><script src="/jquery/3.2.1/jquery.js"></script> <!-- <script src='jquery.dad.js'></script> --><script type="text/javascript">/*!* jquery.dad.js v1 (/dad)* Author William Lima*/(function ($) {'use strict';var supportsTouch = 'ontouchstart' in window || navigator.msMaxTouchPoints;$.fn.dad = function (opts) {var _this = this;var defaults = {target: '>div',draggable: false,placeholder: '',callback: false,containerClass: 'dad-container',childrenClass: 'dads-children',cloneClass: 'dads-children-clone',active: true,};var options = $.extend({}, defaults, opts);$(this).each(function () {var active = options.active;var $daddy = $(this);var childrenClass = options.childrenClass;var cloneClass = options.cloneClass;var jQclass = '.' + childrenClass;var $target = $daddy.find(options.target);var placeholder = options.placeholder;var callback = options.callback;var dragClass = 'dad-draggable-area';var holderClass = 'dads-children-placeholder';// HANDLE MOUSEvar mouse = {x: 0,y: 0,target: false,clone: false,placeholder: false,cloneoffset: {x: 0,y: 0,},updatePosition: function (e) {this.x = e.pageX;this.y = e.pageY;},move: function (e) {this.updatePosition(e);if (this.clone !== false && _this.target !== false) {this.clone.css({left: this.x - this.cloneoffset.x,top: this.y - this.cloneoffset.y,});}},};$(window).on('mousemove touchmove', function (e) {var ev = e;if (mouse.clone !== false && mouse.target !== false) e.preventDefault();if (supportsTouch && e.type == 'touchmove') {ev = e.originalEvent.touches[0];var mouseTarget = document.elementFromPoint(ev.clientX, ev.clientY);$(mouseTarget).trigger('touchenter');}mouse.move(ev);});$daddy.addClass(options.containerClass);if (!$daddy.hasClass('dad-active') && active === true) {$daddy.addClass('dad-active');};_this.addDropzone = function (selector, func) {$(selector).on('mouseenter touchenter', function () {if (mouse.target !== false) {mouse.placeholder.css({ display: 'none' });mouse.target.css({ display: 'none' });$(this).addClass('active');}}).on('mouseup touchend', function () {if (mouse.target != false) {mouse.placeholder.css({ display: 'block' });mouse.target.css({ display: 'block' });func(mouse.target);dadEnd();};$(this).removeClass('active');}).on('mouseleave touchleave', function () {if (mouse.target !== false) {mouse.placeholder.css({ display: 'block' });mouse.target.css({ display: 'block' });}$(this).removeClass('active');});};// GET POSITION FUNCTION_this.getPosition = function () {var positionArray = [];$(this).find(jQclass).each(function () {positionArray[$(this).attr('data-dad-id')] = parseInt($(this).attr('data-dad-position'));});return positionArray;};_this.activate = function () {active = true;if (!$daddy.hasClass('dad-active')) {$daddy.addClass('dad-active');}return _this;};// DEACTIVATE FUNCTION_this.deactivate = function () {active = false;$daddy.removeClass('dad-active');return _this;};// DEFAULT DROPPING$daddy.on('DOMNodeInserted', function (e) {var $thisTarget = $(e.target);if (!$thisTarget.hasClass(childrenClass) && !$thisTarget.hasClass(holderClass)) {$thisTarget.addClass(childrenClass);}});$(document).on('mouseup touchend', function () {dadEnd();});// ORDER ELEMENTSvar order = 1;$target.addClass(childrenClass).each(function () {if ($(this).data('dad-id') == undefined) {$(this).attr('data-dad-id', order);}$(this).attr('data-dad-position', order);order++;});// CREATE REORDER FUNCTIONfunction updatePosition(e) {var order = 1;e.find(jQclass).each(function () {$(this).attr('data-dad-position', order);order++;});}// END EVENTfunction dadEnd() {if (mouse.target != false && mouse.clone != false) {if (callback != false) {callback(mouse.target);}var appear = mouse.target;var desappear = mouse.clone;var holder = mouse.placeholder;var bLeft = 0;var bTop = 0;// Maybe we will use this in the future//Math.floor(parseFloat($daddy.css('border-left-width')));//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');desappear.remove();});} else {mouse.clone.fadeOut(300, function () {desappear.remove();});}holder.remove();mouse.clone = false;mouse.placeholder = false;mouse.target = false;updatePosition($daddy);}$('html, body').removeClass('dad-noSelect');}// UPDATE EVENTfunction dadUpdate(obj) {if (mouse.target !== false && mouse.clone !== false) {var $origin = $('<span style="display:none"></span>');var $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);// UPDATE PLACEHOLDERmouse.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();}}// GRABBING EVENTvar jq = (options.draggable !== false) ? options.draggable : jQclass;$daddy.find(jq).addClass(dragClass);$daddy.on('mousedown touchstart', jq, function (e) {// For touchstart we must update "mouse" positionif (e.type == 'touchstart') {mouse.updatePosition(e.originalEvent.touches[0]);}if (mouse.target == false && active == true && (e.which == 1 || e.type == 'touchstart')) {var $self = $(this);// GET TARGETif (options.draggable !== false) {mouse.target = $daddy.find(jQclass).has(this);} else {mouse.target = $self;}// ADD CLONEmouse.clone = mouse.target.clone();mouse.target.css({ visibility: 'hidden' }).addClass('active');mouse.clone.addClass(cloneClass);$daddy.append(mouse.clone);// ADD PLACEHOLDERvar $placeholder = $('<div></div>');mouse.placeholder = $placeholder;mouse.placeholder.addClass(holderClass);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);// GET OFFSET FOR CLONEvar bLeft = Math.floor(parseFloat($daddy.css('border-left-width')));var bTop = Math.floor(parseFloat($daddy.css('border-top-width')));var difx = mouse.x - mouse.target.offset().left + $daddy.offset().left + bLeft;var dify = mouse.y - mouse.target.offset().top + $daddy.offset().top + bTop;mouse.cloneoffset.x = difx;mouse.cloneoffset.y = dify;// REMOVE THE CHILDREN DAD CLASS AND SET THE POSITION ON SCREENmouse.clone.removeClass(childrenClass).css({position: 'absolute',top: mouse.y - mouse.cloneoffset.y,left: mouse.x - mouse.cloneoffset.x,});// UNABLE THE TEXT SELECTION AND SET THE GRAB CURSOR$('html,body').addClass('dad-noSelect');}});$daddy.on('mouseenter touchenter', jQclass, function () {dadUpdate($(this));});});return this;};})(jQuery); </script> <script type="text/javascript"> $(function () {//dad simple demo$('.dad').dad();}); </script> </body> </html>
备注：欢迎加入web前端求职招聘qq群：668352707
