首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
您现在的位置: 程式碼之家 >> 編程語言 >  >> 更多程式語言 >> 程式設計綜合問答

jQuery UI Sortable 三種初始化寫法差異:選擇器範圍決定交互行為

     編輯:程式設計綜合問答

代碼展示三種 .sortable() 初始化方式,本質差異在於 選擇器匹配的元素集合不同,導致可拖拽範圍、連接目標不同。

三種寫法對比

寫法選擇器效果
1#div1、#div2、#div3 分別初始化精細控制各容器連接關係,div3 僅接收不外拖
2#container 統一初始化,items:'p'所有 <p> 可在三欄間自由移動,dropOnEmpty 無效(因容器非 .column)
3.column 統一初始化三欄對等,均可拖拽互通,dropOnEmpty:false 可禁止空欄接收

選型建議

  • 需非對稱連接(如單向流動) → 寫法 1
  • 完全自由排序、結構扁平 → 寫法 2 或 3
  • 動態增減容器 → 寫法 3 結合 refresh() 最便利

dropOnEmpty 生效條件

僅當 connectWith 指向的容器選擇器匹配到空容器時生效。寫法 2 中 connectWith:'.column' 但初始化目標是 #container,故無效。

  1. 上一篇文章:
  2. 下一篇文章:
Copyright © 程式碼之家 All Rights Reserved