增強Jquery拖放式演示

Question

我有一個要求非常接近 this Jquery demo，這是一個簡單的購物車演示。基本上我需要對這個演示做兩個改進。

1. 我需要隨可用「產品」一起輸入文字。因此，當我拖放其中一個產品時，應該將文本字段與該字段拖動在一起，這些字段將由用戶在「購物車」字段中填充。

2. 我需要在購物車中的每個物品前面有一個「十字」，這可以用來刪除某個物品。 Jquery的「摧毀」功能似乎並沒有這樣做。那麼我怎樣才能完成從購物車中刪除商品？

感謝您的幫助。

Answer 1

您可以在可拖動定義中指定您自己的「助手」。無論您指定助手是何種html，都將在拖動動畫中顯示。在您的可排序（演示中的放置區域）中，您可以覆蓋beforeStop函數。在那裏你可以用你想要實際投入購物車的物品替換物品。在這種情況下，您可以添加JavaScript或其他東西的X按鈕來刪除項目

我最近實現這個從數據表拖到列表，所以不得不把tr轉換成li。它在jQuery 1.4中工作，但當我拖出1.5的頂部時，我得到了一個奇怪的結果，但我還沒有解決。這裏是我的助手確定指標

helper: function() { 
     var text = this.children[0].innerText; 
     var result = "<li id='"+this.id+"'>"+text+"</li>"; 
     return result; 
    }, 

，這裏是我的beforeStop功能

beforeStop: function(event, ui) { 
     var id = ui.helper.attr("id"); 
     var text = ui.helper.text(); 
     var li = "<li id='"+id+"'>"+text+"</li>"; 
     $(ui.item).replaceWith(li); 
    }