README

用于 dragula 拖放库的 yii2 扩展/小部件

不需要除 dragula 之外的其他库。

有关详细文档和示例，请参阅 Dragula 示例页面

配置选项

'containers'：包含 HTML 容器 ID 的字符串数组，或者包含选择器 JavaScript 代码的 JsExpression
'options'：dragula 配置选项数组，请参阅 Dragula 示例页面或 Dragula 在 gihub
事件
'drag'：JsExpression JavaScript 函数 function (el) { ... }
'drop'：JsExpression JavaScript 函数 function (el) { ... }
'over'：JsExpression JavaScript 函数 function (el, container) { ... }
'out'：JsExpression JavaScript 函数 function (el, container) { ... }

示例/用法

####1. 拖放项的 HTML 容器

<ul id="files">
    <li data-filename="file 1">file 1</li>
    <li data-filename="file 2">file 2</li>
    <li data-filename="file 3">file 3</li>
</ul>

####2. 调用小部件

<?= \x1\dragula\Dragula::widget([
    'containers' => ['#files'],
    'options'    => [
        'revertOnSpill' => true,
    ],
    'drop' => new \yii\web\JsExpression('my.dropped'),
]); ?>

####3. 处理拖放事件的 JavaScript

<script>
    var my = {};

    my.dropped = function(el, container) {
        var c      = $(container);
        var items  = c.find('li[data-filename]');
        var result = [];
        $.each(c.find('li[data-filename]'), function(key, item) {
            result.push($(item).data('filename'));
        });

        console.log('result', result);
        // your logic here, e.g. ajax post
    }
</script>

注意，我在示例代码中使用了 jQuery，这是可选的，并且本项目未引用。

此外，您需要自行注意脚本加载顺序！

e-frank / yii2-dragula

维护者

详细信息

README

配置选项

示例/用法