JQuery Add 排序是一種非常實用的技巧,在前端開發中能夠幫助開發者快捷高效地完成頁面元素的排序功能。
$(function(){ $("#sortable").sortable({ cursor: "move", revert: true }); });
以上代碼使用了jQuery中的sortable()函數來實現頁面元素的排序。其中,通過指定可排序元素的id為sortable,設置了鼠標移動時的樣式以及拖拽結束后元素是否返回原位置的屬性。
除了以上代碼外,我們還可以通過一些可選參數來定制實現的排序效果,例如:
$(function(){ $("#sortable").sortable({ axis: "y", //限制只能上下移動 containment: "#wrapper", //限制只能在wrapper內移動 opacity: 0.6, //拖拽時元素的透明度 tolerance: "pointer", //默認tolerance是intersect,也可以設置pointer,表示只有鼠標指針在元素上時才能開始拖拽 update: function(event, ui){ //排序結束后觸發的回調函數 console.log("排序完成"); } }); });
在以上代碼中,我們添加了axis、containment、opacity、tolerance、update等多個參數。其中,axis限制了元素只能上下移動;containment限制了元素只能在wrapper容器內移動;opacity設置了拖拽時元素的透明度;tolerance通過設置pointer屬性,表示只有鼠標指針在元素上時才能開始拖拽,避免不必要的拖拽操作;update則是排序結束后觸發的回調函數,可以進行一些其他操作。
在實際開發過程中,我們可以根據實際需要,結合不同的參數和樣式,實現各種不同的排序效果,從而提高開發效率和用戶交互性。