2012-01-25 152 views
2

我想要做的是創建一個卡片排序腳本。基本上,你有一張「卡片」列表,然後你應該把它列入任何數量的「堆棧」(列表)。我正在使用jQuery-UI可排序插件,並且能夠連接列表以在它們之間進行拖動。我面臨的問題是,我無法找出一種方法來檢查卡片是否懸停在空白區域或現有列表上,並且如果前者刪除它,則會創建一個新列表。使用jQuery可拖拽/可拖拽和排序創建新元素

我已經嘗試使用可拖放/ droppable,以便該卡最初不限於排序,但我仍然無法讓它識別卡的位置。我也認爲可拖動/可拖放不會是我需要的,因爲我無法將卡從可排序的列表移回原始列表(可拖動)。

最終,我將使用jQuery的ajax功能來保存排序結果,但直到我能夠創建新列表時才能這樣做。

有沒有人有這樣的經驗嗎?任何幫助將是偉大的!

+0

也許準備一個你到目前爲止的jsfiddle?當問更復雜的問題時,回答問題的人通常需要花費相當長的時間來編寫一個示例。 – PriorityMark

+0

這是一個整潔的工具。這是我想出來的。原諒醜陋,並注意我已經嘗試了比現在更多的其他事情。目前,初始列表是可排序的,並且可以通過單擊原始列表下方顯示的+鏈接來添加新的「堆棧」,並且原始列表中的項目可以在它與創建的可排序列表之間移動。 http://jsfiddle.net/Em8gn/6/ – imkingdavid

回答

4

對不起,遲到的反應,但正在處理它,並沒有注意到其他答案。

我的變化與Goran's相當。 http://jsfiddle.net/fordlover49/rxVPq/

請注意,您需要根據自己想要的內容添加標題以及其他所有內容,但它會完成基本目標,同時保留原始項目,並且只有一組選項可用於可排序的列表..

雖然戈蘭的解決方案似乎工作,我會告誡你,他用來移動對象的方法是危險的和不正確的。如果在移動到新列表的項目上有任何事件綁定器,則它們將丟失,因爲他從DOM中刪除了綁定了事件的舊項目。

+0

這是一個很好的觀點。我會看看你的解決方案,看看哪一個最好。感謝你爲此而努力,幫助我。我會鼓勵你,如果我最終使用你的實現,而不是另一個,我會設置這個解決方案。 – imkingdavid

+0

那麼你的工作也很好,因爲它具有不會丟失事件綁定的額外好處,所以我會將其標記爲解決方案。再次感謝(你們倆)。 – imkingdavid

0

儘管我無法弄清楚如何將事件拖放到屏幕的空白部分來創建新堆棧,但我可以做的最好的辦法是將卡片拖放到new區域。

請參閱以下jsFiddle

該代碼允許你將牌從卡組拖到現有堆棧或新堆棧,並且如果需要的話也可以回到卡組。如果項目被拖動到新位置後,它也會刪除堆棧(但不包括平臺)。

希望它有幫助。

+0

這絕對是一個可能性,如何做到這一點感謝您花時間做到這一點。我會看看我是否可以將您的解決方案實施到我擁有的解決方案中,然後讓您知道它的工作原理。 – imkingdavid

+0

我將此標記爲已解決。我已經能夠實現您的解決方案來即時創建新的「堆棧」。儘管這不是我設想的,但它的效果很好。謝謝一堆! – imkingdavid

+0

這種方法非常危險,因爲您將原始項目從DOM中刪除並重新創建。通過這樣做,您將失去之前可能存在的任何事件綁定。 – PriorityMark