带删除功能:

<!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上下载，下载地址是：https://github.com/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="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>  <!-- <script src='jquery.dad.js'></script>    --><script type="text/javascript">/*!* jquery.dad.js v1 (http://konsolestudio.com/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上下载，下载地址是：https://github.com/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="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>  <!-- <script src='jquery.dad.js'></script>    --><script type="text/javascript">/*!* jquery.dad.js v1 (http://konsolestudio.com/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

转载于:https://www.cnblogs.com/xutongbao/p/9924881.html

拖拽插件jquery.dad.js相关推荐

  1. html5 div拖拽插件,div拖拽插件——JQ.MoveBox.js(自制JQ插件)

    有一段时间没更新博客了,都不知道忙些什么,学习也没什么进展,惭愧. 这一周空闲的时间学着自己写一下JQ插件. 以前用原生的JS做过类似拖拽div的效果,现在按原思路改做成一个JQ的小插件,当作制作JQ ...

  2. html5div拖拽插件,jquery+html5多文件拖放上传插件jquery.filer

    jquery.filer是一个简单的HTML5文件上传插件工具,彻底改变jQuery文件输入并使其支持同时选择多个文件,支持拖放,上传验证文件.大小.后缀名,显示缩略图,自定义上传类型图标,即时上传, ...

  3. 【组件】前端js拖拽插件 VUE

    [组件]前端js拖拽插件 VUE Vue Draggable - Vue 拖拽组件王者 Vue drag resize - 轻量级,无依赖,可缩放 Vue smooth dnd - 简单动效,上下拖拽 ...

  4. js 拖拽生成html,js拖拽插件 js 拖拽控件生成自定义表单 怎么实现

    想请教一个js的问题,拖拽控件 js 拖拽控件生成自定义表单 怎么实现 说说步骤吧 监听mousedown事件 - 获取鼠标点击元素,判断是否可拖拽 - 设置flag做标记 - 建一个tempDOM, ...

  5. sortable 拖拽时互换目标的位置_双端通用型JS拖拽插件的封装与应用

    最近工作中遇到一个需求,需要将一个元素从某位置拖动到另一固定位置后执行某一交互行为,具体效果如下: 这个看似简单的需求,然而实现起来却并不那么顺利.我首先想到的是如何通过哪个现有的插件来快速解决这个问 ...

  6. ajax 批量上传图片插件,jQuery多文件上传插件jquery.imageuploader.js

    插件描述:jQuery多文件上传插件jquery.imageuploader.js,可以同时上传多个文件并支持拖拽上传 jquery.imageuploader.js 一款jquery多文件上传插件. ...

  7. java se拖动插件_JQuery之拖拽插件实现代码

    而很多页面效果都要用到这些位置.不得已,得练练,得记记. 下面就来说说这个基于 JQuery的简易拖拽插件吧. 按惯例,先说说拖拽的原理,以及搞这么一个东东的步骤: 那什么是拖拽呢? 看名字就知道了: ...

  8. java se拖动插件_JQuery之拖拽插件

    Jeremy - DragDrop Test !(function($) { $.extend({//获取鼠标当前坐标mouseCoords:function(ev){if(ev.pageX||ev. ...

  9. jQuery插件 -- Cookie插件jquery.cookie.js（转）

    2019独角兽企业重金招聘Python工程师标准>>> jQuery插件 -- Cookie插件jquery.cookie.js(转) Cookie是网站设计者放置在客户端的小文本文 ...

最新文章

  1. Lync2013与Exchange2013集成先决条件(十九)
  2. java离职交接文档_离职了就没责任？会计离职没办这2项交接，要承担法律责任！...
  3. spring事务介绍
  4. python datetime 加一个月_Python 如何计算当前时间减少或增加一个月
  5. 将指定的计数添加到信号量中会导致其超过_从烷烃中分离烯烃、从原油中分离碳氢化合物…这七大化学分离过程将影响世界...
  6. 草莓软件验证系统源码 附带易语言模块
  7. Java关键字(六)——super
  8. MySQL在远程访问时非常慢的解决skip-name-resolve
  9. 在python中类型属于对象变量是没有类型的_如何理解python对象有类型，变量无类型...
  10. 搭建自己的GIT服务器
  11. 【转】在Ubuntu上下载、编译和安装Android最新源代码
  12. 【蓝桥结果填空】：时间显示
  13. opencv 实现角点检测 Shi-Tomasi角点检测
  14. java jvm dump文件_各种获取JVM DUMP的方法
  15. java.lang.UnsupportedOperationException: Required method instantiateItem was not overridden
  16. Mysql设计层优化整理总结
  17. 让孩子更快乐地学编程，一套积木就够了，长毛象AI百变编程积木套件体验
  18. java后台框架 springmvc mybaits 集代码生成器 SSM SSH
  19. 二级计算机vb答案,计算机二级VB考试练习题及答案
  20. css3文字炫彩电音效果

热门文章

  1. parsec(The parsec benchmark suit )使用教程
  2. 35年夜linux版本竞技
  3. 多线程之interrupt
  4. Python Flask框架-开发简单博客-项目布局、应用设置
  5. Radon变换（Matlb）
  6. 张量学习（6）：张量代数
  7. 普渡大学电子计算机专业,普渡大学电子与计算机工程专业硕士录取！
  8. 程序员！别再埋头学Python了！
  9. 每天撸拼多多纸巾（非广告）
  10. MTU问题导致大数据包出不去。