This will be written up in detail, but for now, this is just a demo page for my KupieTools Draggable Elements WordPress plugin.
If you select “View Page Source” in your browser, you will see that the four following DIV elements, as defined in the page HTML, are just ordinary DIV elements with a single classname, an ID, and some visual styling. The KupieTools Draggable Elements plugin adds draggability to any arbitrary page element by simply adding a class name other CSS selector specified in the plugin. (If you use your browser’s Inspector instead of View Page Source, you’ll see the current state of those elements, with any changes or additions the plugin created to make them draggable, as it does.)
As an experiment, in your browser’s Inspector, you can add the class name “drag” to the <ul id="sinatra-primary-nav" class="menu"> around the menu headings at the top of the page to make tear-off menus. This will work for any UL element on the page, to make the LI elements it contains draggable.
Notice that the elements scroll with the page, even though being able to arbitrarily drag them means they are removed from the document flow. However, invisible placeholder elements sit in their original position, ensuring that things after them on the page do not reflow.
Thought not yet ready for distribution as of this writing (2025 july 11), this plugin is shared in my Github at https://github.com/kupietools/ktwp-wp-plugin-draggable-elements. The README in that repo provides more detail than this page.
