如何在購物車中拖動新的數據後從舊購物車中刪除舊數據

Question

我想寫一些jQuery代碼，當我們拖動它時只顯示一個值。例如，如果我拖動Bank，那麼它應該只顯示Bank。如果我拖動Rent它應該只顯示Rent，反之亦然。

在我的jsFiddle中有一些代碼錯誤，請幫我解決它們。

$("#shoppingCart1 ol").droppable({ 
    // .... 
}) 

my jsFiddle

Answer 1

要附加直接拖動項。你只需要用新的東西來替換舊的東西。

因此改變你的功能，這一點 - 的

var listItem = $("<li></li>", { 
     "text": ui.draggable.text(), 
     "data-id": productid 

    }); 
    self.html(listItem); 

Demo here

Answer 2

使用.html()代替.appendTo()

Working Fiddle

$(this).html($("<li></li>", { 
    "text": ui.draggable.text(), 
     "data-id": productid 

})); 

Answer 3

您已經從列表中日刪除所有項目在有一類placeholder所以只設置你的新項目有類placeholder

 $("<li></li>", { 
      "text": ui.draggable.text(), 
      "data-id": productid, 
      "class": "placeholder"    
     }).appendTo(this); 

現在，您的代碼將找到的項目，並正確地將其刪除。

Example JSFiddle