jQuery的sortables - 連接問題

我對的jsfiddle兩個例子：jQuery的sortables - 連接問題

實施例1

在第一個我可以移動列表元素甚至從一個子元素到根元素。然而，讓它「快速」並不容易。

實施例2

在第二個例子我浮起列表元素。這一次，我無法讓他們「抓住」子元素。

問題

有沒有更容易捕捉的好辦法？
我該如何解決浮動問題？

來源

2011-05-24 Jens Törnell

我不理解問題。在你的兩個例子中，我能看到的唯一區別是一個是水平的而另一個是垂直的。我可以將元素移入/移出兩個孩子。 – Sparky 2011-05-24 19:06:19

我可以在第二個中並排移動它們，但通過將它們移動到其他元素的內部而產生問題。 – 2011-05-24 19:17:54

在我看來（與Safari），他們是100％同樣工作。＃2更難以使用，因爲它的佈局具有更小的「拖放區」。 – Sparky 2011-05-24 19:23:44

有jQuery的一個迄今未公開的選項排序確定針對其公差檢查元素：toleranceElement。如果未設置，則檢查整個項目的放置位置（包括嵌套列表），但是如果已設置，則僅考慮與選擇器匹配的子項目。

這意味着您必須稍微更改HTML標記以將列表項目（項目文本）的主要內容包裝到元素中，並使用它來檢查排序定位。這將省去嵌套的<ul>，從而有效地停止抖動，否則這種抖動非常嚴重。

HTML：

<div id="example5"> 
    <ul> 
     <li ><div>Item 1</div> 
      <ul> 
       <li ><div>Item 1 1</div><ul></ul></li> 
       <li ><div>Item 1 2</div><ul></ul></li> 
       <li ><div>Item 1 3</div><ul></ul></li> 
      </ul> 
     </li> 
     <li ><div>Item 2</div><ul></ul></li> 
     <li ><div>Item 3</div><ul></ul></li> 
     <li ><div>Item 4</div><ul></ul></li> 
    </ul> 
</div>

的Javascript：

$("#example5 ul").sortable({ 
    connectWith: "#example5 ul", 
    placeholder: "ui-state-highlight", 
    toleranceElement: 'div' 
});

您可以嘗試修改演示here和here。

你可能也想玩opacity,cursorAt和tolerance。看看documentation。

請注意，它不是一個完美的解決方案，如果你不滿意的結果，看看使用插件。 Manuele J Sarfatti的nestedSortable插件看起來像是可能對您有用的東西：http://mjsarfatti.com/sandbox/nestedSortable/

來源

2011-05-24 20:13:20 DarthJDG

我在Safari瀏覽器中查看了兩個示例，並且我可以將任何元素移入/移出子元素而沒有太大的問題。

這是爲什麼＃2是使用比較困難......

在例如＃2的「拖放區」僅僅是高達你的元素，以便與你的短期因素，還有一個更小的區域讓你的鼠標進入。

示例＃1中的「拖放區」非常寬，因此在您向上/向下移動鼠標時很容易觸及它。

我能想到解決你的問題的唯一方法就是讓例子＃2中的項目更高，從而模擬你在例子＃1中除了它的一面之外的東西。

http://jsfiddle.net/9uhfX/3/

來源

2011-05-24 19:29:26 Sparky

jQuery的sortables - 連接問題

回答

相關問題