Add drag and drop capabilities

[rubenheymans]

Thanks for this awesome module!

Is it possible to add drag and drop, use a script like this one: https://github.com/RamonSmit/Nestable
use an arrow icon as drag handler

---

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

[kartik-v]

Probably for later. Wanted to minimize amount of javascript used - yet make it configurable for most use cases. These maybe embedded as optional plugins later.

Note that sorting/reordering is currently possible through the arrow keys (up, down, left, and right).

[arogachev]

What's with this feature? It's hard to manage tree without drag-and-drop.

[kartik-v]

Limited by time and may not be able to focus on this immediately.

Its lower in my priority currently - because of the additional overhead to both PHP & JS code - as well as the complex DB queries needed to achieve this and the performance.

Please feel free to submit a PR for this if you want it faster or find a better approach to do this.

[attybean]

Here is my simple solution: https://stackoverflow.com/questions/49487557/javascript-add-form-model-name-to-formdata

`<script>
function allowDrop(event) {
event.preventDefault();
}

function drop(event) {
    event.preventDefault();
    var dropFiles = event.dataTransfer.files;
    event.target.click();
        setTimeout(function(){
            var formData = new FormData();
            $.each(dropFiles, function(i, file){  
                formData.append('Files[files][]',file);  
            });                  

            $.ajax({
                   url : '/files/upload-files',
                   type : 'POST',
                   data : formData,
                   processData: false,  // tell jQuery not to process the data
                   contentType: false,  // tell jQuery not to set contentType
                   success : function(data) {
                       // console.log(data);
                   }
            });
        }, 1000);
}

function highlightToggle(event) {
    event.preventDefault();
    event.target.classList.toggle("highlightDrop");
}

</script>`

to use this I just added the following to the 'options' of the widget:

'nodeLabel' => function($node) {
                                                return '<span id = '.$node->file_id.' ondragenter="highlightToggle(event)" ondragleave="highlightToggle(event)">'.$node->name.'</span>';
                                            },