jQuery.dad.min.js 是一個經典的jQuery插件,用于實現可拖動和拖放的功能。
此插件特別適用于需要大量移動或重新排序元素的應用程序,提供了許多靈活的選項和事件回調。
$("ul").dad({ draggable: "li" });
在上面的代碼片段中,我們將 ul 元素中的所有 li 元素設置為可拖動的。
$("ul").dad({ draggable: "li", placeholder: "drop-zone", callback: function () { console.log("Element dropped!"); } });
在這個示例中,我們指定了一個類名“drop-zone”,在拖動過程中將生成一個占位符,同時注冊了一個回調函數,以在元素放置時觸發。
此外,jQuery.dad.min.js 還為拖動元素和占位符提供了定制化的 CSS 類名,可以自定義外觀和行為。
.ui-draggable-dragging { opacity: 0.8; box-shadow: 0 2px 4px rgba(0,0,0,0.2); } .ui-draggable-placeholder { height: 100px; background-color: #f0f0f0; }
最后,該插件也支持觸屏設備,并提供了觸屏事件的類似選項和回調函數。
總之,jQuery.dad.min.js 是一個非常實用的插件,可以為 Web 應用程序提供高度可定制的拖放功能。