Tutorial: Custom dragging and dropping

Custom dragging and dropping

The div below is draggable using the HTML5 Drag and Drop API. The PMA.UI.Components.Gallery and PMA.UI.Components.SlideLoader expect an object of MIME TYPE "application/x-pma-node" @{link PMA.UI.Components.DragDropMimeType} and of the type PMA.UI.Components~dragDropObject

    <!--create a draggable element and attach the events -->
    <div draggable="true" ondragstart="drag(event)">Drag me over the slideloader or the gallery</div>
    <script type="text/javascript">
        console.log("PMA.UI loaded: " + PMA.UI.getVersion());

        function drag(ev) {
            ev.dataTransfer.setData(PMA.UI.Components.DragDropMimeType, JSON.stringify({ 
                serverUrl: "https://host.pathomation.com/pma.core.2/", 
                path: "Reference/3DHistech/CMU-1.mrxs", 
                isFolder: false 
            }));
        }
    </script>

Drag me over the slideloader or the gallery

Tutorial: Custom dragging and dropping

Horizontal