jquery拖拽插件

特討厭這種收費的插件網站（吐槽下​，哈哈哈，咱們仍是要多多支持原創。）​

當時很是想看這個js插件，查看了下頁面代碼能繞過去下載資源。這位做者代碼質量仍是不錯的。

jquery.dad.js

/*!
 * 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.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;
}
.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;
}

使用方法：

插件描述：DAD 是一款基於 jQuery 的拖拽拖放插件，它支持常見的水平拖放、垂直拖放、多行拖放、指定拖放區域、回調函數、容許禁止拖放等等，同時你也能夠稍加改造，作成相似垃圾簍、購物車等效果。

一、引入文件

<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	默認是否可拖放