I always reach for https://dndkit.com myself.
westmark
sodapopcan
westmark
tlietz
After many hours of research, I have finally found a dnd library that is built for vanillajs first, is actually performant (uses webworkers), has a good auto scroll out of the box, and is used in production applications:
Additionally, it doesn’t use the native drag and drop web api, which means that it doesn’t over-scroll in a glitchy way on mobile, and the dragged element can be constrained to a certain axis since it doesn’t need to follow the cursor.
It’s more of a layout engine, but there are Kanban examples that can easily be pared down to do what scrollablejs does.
10
jeffdaley
Hey y’all. I’m not an Elixer dev but I came across this thread while searching for drag-and-drop libraries.
Pragmatic Drag and Drop by Atlassian is worth a look. It’s a low-level library so you might have to do more setup than, e.g., Dragula, but the documentation is extensive.
Cheers!
2
dimitarvp
_jonas
This one looks interesting.
I’m still looking for something like react-beautiful-dnd (also from Atlassian), but not tied to React.
It seems that Pragmatic DnD also uses the web platform’s drag and drop API instead of controlling the dragged items movement which I guess is more performant but it somehow just feels less “smooth”.
There is nothing I’ve seen that feels as pleasant to use (to me) as the standard react-beautifu-dnd example here:
0
slouchpie
I was looking at Muuri today and trying to get the Kanban example working. Examples | Muuri Docs It took me some time to turn the CSS into tailwind and break the HTML into small functions so I am pasting what I did here. Hopefully it helps somebody else get started with Muuri + Phoenix.
defmodule MyAppWeb.MuuriLive.Kanban do
@moduledoc false
use MyAppWeb, :html
def kanban(assigns) do
~H"""
<div id="muuri-kanban-demo" phx-hook="KanbanHook">
<div class={["drag-container", "fixed top-0 left-0", "z-[1000]"]}></div>
<div class={["board", "relative"]}>
<.board_column header="Todo" indexes={1..5} />
<.board_column header="Working" indexes={6..10} />
<.board_column header="Done" indexes={11..15} />
</div>
</div>
"""
end
attr :header, :string
attr :indexes, :integer
defp board_column(assigns) do
~H"""
<div class={[
"board-column done",
"absolute top-0 left-0",
"py-0 px-[10px]",
"w-1/3",
"z-[1] muuri-item-releasing:z-[2] muuri-item-dragging:z-[3] muuri-item-dragging:cursor-move"
]}>
<div class={[
"board-column-container",
"w-full h-full"
]}>
<div class={[
"board-column-header",
"relative",
"h-[50px] leading-[50px]",
"overflow-hidden",
"py-0 px-[20px]",
"text-center",
"bg-green-500",
"text-white",
"rounded-sm",
"font-bold",
"tracking-[0.5px]",
"uppercase"
]}>
<%= @header %>
</div>
<div class={[
"board-column-content-wrapper",
"relative",
"p-[8px]",
"bg-blue-700",
"h-screen",
"overflow-y-auto",
"rounded-sm"
]}>
<div class={["board-column-content", "relative min-h-full"]}>
<.board_item :for={index <- @indexes} index={index} />
</div>
</div>
</div>
</div>
"""
end
attr :index, :integer
defp board_item(assigns) do
~H"""
<div class={[
"board-item",
"absolute w-full m-[8px]",
"muuri-item-releasing:z-[9998] muuri-item-dragging:z-[9999]",
"muuri-item-dragging:cursor-move",
"muuri-item-hidden:z-[0]"
]}>
<div class={[
"board-item-content",
"relative p-[20px]",
"bg-white",
"rounded-[4px]",
"text-[17px]",
"cursor-pointer"
]}>
<span>Item #</span><%= @index %>
</div>
</div>
"""
end
end
and the hook
import Muuri from "../../vendor/muuri";
const KanbanHook = {
mounted() {
var dragContainer = document.querySelector(".drag-container");
var itemContainers = [].slice.call(
document.querySelectorAll(".board-column-content"),
);
var columnGrids = [];
var boardGrid;
// Init the column grids so we can drag those items around.
itemContainers.forEach(function (container) {
var grid = new Muuri(container, {
items: ".board-item",
dragEnabled: true,
dragSort: function () {
return columnGrids;
},
dragContainer: dragContainer,
dragAutoScroll: {
targets: (item) => {
return [
{ element: window, priority: 0 },
{ element: item.getGrid().getElement().parentNode, priority: 1 },
];
},
},
})
.on("dragInit", function (item) {
item.getElement().style.width = item.getWidth() + "px";
item.getElement().style.height = item.getHeight() + "px";
})
.on("dragReleaseEnd", function (item) {
item.getElement().style.width = "";
item.getElement().style.height = "";
item.getGrid().refreshItems([item]);
})
.on("layoutStart", function () {
boardGrid.refreshItems().layout();
});
columnGrids.push(grid);
});
// Init board grid so we can drag those columns around.
boardGrid = new Muuri(".board", {
dragEnabled: true,
dragHandle: ".board-column-header",
});
},
};
export { KanbanHook };
I will be changing the JS to use this.el. For now, it is identical to the JS given in their example.
It works nice. It “feels” better than sortable, which was my go-to for drag-n-drop
The tailwind modifiers I added like this:
plugin(({ addVariant }) => addVariant("muuri", [".muuri&", ".muuri &"])),
plugin(({ addVariant }) => addVariant("muuri", [".muuri&", ".muuri &"])),
plugin(({ addVariant }) =>
addVariant("muuri-item", [".muuri-item&", ".muuri-item &"]),
),
plugin(({ addVariant }) =>
addVariant("muuri-item-shown", [
".muuri-item-shown&",
".muuri-item-shown &",
]),
),
plugin(({ addVariant }) =>
addVariant("muuri-item-hidden", [
".muuri-item-hidden&",
".muuri-item-hidden &",
]),
),
plugin(({ addVariant }) =>
addVariant("muuri-item-positioning", [
".muuri-item-positioning&",
".muuri-item-positioning &",
]),
),
plugin(({ addVariant }) =>
addVariant("muuri-item-dragging", [
".muuri-item-dragging&",
".muuri-item-dragging &",
]),
),
plugin(({ addVariant }) =>
addVariant("muuri-item-releasing", [
".muuri-item-releasing&",
".muuri-item-releasing &",
]),
),
plugin(({ addVariant }) =>
addVariant("muuri-item-placeholder", [
".muuri-item-placeholder&",
".muuri-item-placeholder &",
]),
),
in tailwind config js.
7
cmo
Looking at muuri I noticed the author was/is writing a new set of libraries, one of which is GitHub - niklasramo/dragdoll: Modular and extensible drag and drop system. · GitHub.
7