e-frank/yii2-dragula

asset-bundle and widget for dragula drag and drop library

Installs: 1 490

Dependents: 0

Suggesters: 0

Security: 0

Stars: 0

Watchers: 1

Forks: 2

Open Issues: 1

Type:yii2-extension

dev-master 2019-11-13 14:34 UTC

This package is auto-updated.

Last update: 2021-11-13 20:01:32 UTC


README

yii2 extension / widget for dragula drag and drop library

does not require any other libraries than dragula.

for a detailed documentation and demo see Dragula example page

configuration options

  1. 'containers': either array of strings containing the ids of the HTML containers or a JsExpression containing the javascript code for the selector
  2. 'options': array of dragula configuration options, see Dragula example page or Dragula on gihub
  3. events
  4. 'drag': JsExpression javascript function function (el) { ... }
  5. 'drop': JsExpression javascript function function (el) { ... }
  6. 'over': JsExpression javascript function function (el, container) { ... }
  7. 'out': JsExpression javascript function function (el, container) { ... }

example / usage

####1. HTML container for drag and drop items

<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. Call widget

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

####3. Javascript for handling drop event

<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>

Note that i used jquery in my example code, which is optional and not referenced by this project.

Also, you have to take care of script loading order yourself!