jquery.dad.min.js 是一款基于 jQuery 的拖拽/拖放插件-BFW插件库

jquery.dad.min.js 是一款基于 jQuery 的拖拽/拖放插件

jquery.dad.min.js 是一款基于 jQuery 的拖拽/拖放插件，它支持常见的水平拖放、垂直拖放、多行拖放、指定拖放区域、回调函数、允许/禁止拖放等等，同时你也可以稍加改造，做成类似垃圾篓、购物车等效果。

使用方式

第一步引入bfwone 加载依赖项jquery

第二步use插件及css

第三步配置

属性/方法	类型	默认值	说明
target	字符串	>div	要拖放的对象
draggable	布尔值	false	绑定拖动对象
placeholder	字符串	drop here	放入区域的文本占位符
callback	布尔值	false	拖放后的回调函数
containerClass	字符串	dad-container	为绑定对象增加的 class
childrenClass	字符串	dads-children	为绑定对象的子对象增加的 class
cloneClass	字符串	dads-children-clone	为被克隆对象增加的 class
active	布尔值	true	默认是否可拖放

示例如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" data="dep=jquery.17&err=0" type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        bready(function() {
            use(["jquery.dad.min", "jquery.dad"], function() {
                $('.bfwcont').dad();
            });
        });
    </script>
    <style>
        .bfwcont {
           
            margin: 0 auto;
            font-family: arial,SimSun;
            font-size: 0;
        }
        .bfwcont .item {
            display: inline-block;
            width: 180px;
            height: 100px;
            margin: 20px;
            *display: inline;
            *zoom: 1;
          
        }
        .bfwcont .item1 {
            background-color: #1faeff;
        }
        .bfwcont .item2 {
            background-color: #ff2e12;
        }
        .bfwcont .item3 {
            background-color: #00c13f;
        }
        .bfwcont .item4 {
            background-color: #e1b700;
        }
        .bfwcont .item5 {
            background-color: #7200ac;
        }
        .bfwcont span {
            display: block;
            height: 100px;
            line-height: 100px;
            font-size: 32px;
            text-align: center;
            color: #fff;
        }
    </style>
</head>
<body>
    <h1>水平拖拽</h1>

    <div class="bfwcont">
        <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 class="item item1">
            <span>6</span>
        </div>
    </div>
</body>
</html>