jQuery拖放然後打開每個列表項的特定警報

Question

我有jQuery的問題。我有3個無序列表，當列表項從第一個ul被刪除到第二個或第三個時，我想要打開一個警報，併爲每個列表項目提供不同的信息。這是我做的，但它不起作用：jsFiddle。

$(document).ready(function() { 
    $('ul.connectedSortable').sortable({ 
    connectWith: "#sortable2, #sortable3", 
    helper: 'clone', 
    stop: function (event, ui) { 
     var itemTypeID = ui.draggable.attr("id"); 
     var itemType = itemTypeID.data("draggableItem"); 
     switch (itemType) { 
     case 'text': 
      alert('text!'); 
      break; 
     case 'photo': 
      alert('photo!'); 
      break; 
     case 'video': 
      alert('video!'); 
      break;   
     case 'music': 
      alert('music!'); 
      break; 
     default: 
      alert(itemType); 
     } 
    } 
    }); 

    $("#draggable").draggable({ 
    connectToSortable: "#sortable2, #sortable3", 
    helper: "clone", 
    revert: "invalid" 
    }); 
}); 

請幫忙！

Answer 1

代碼存在一些問題。 jQueryUI可能很難理解，我忍受了它。

• 首先，您不需要聲明li爲可拖動（如果沒有其他功能背後），可導致sortable爲您做這件事。
• ui.item它已經是一個jQuery項目要求.data()您檢索id，但這只是文本，你的方法你應該包裝它$('#'+itemTypeID)但jQueryUI已經爲你做了。

我嘗試這樣做，我認爲這是你想要做什麼：

$(document).ready(function() { 
    $('ul.connectedSortable').sortable({ 
    connectWith: ".connectedSortable", 
    helper: 'clone', 
    stop: function (event, ui) { 
     var itemType = ui.item.data("draggableitem"); 
     switch (itemType) { 
     case 'text': 
      alert('text!'); 
      break; 
     case 'photo': 
      alert('photo!'); 
      break; 
     case 'video': 
      alert('video!'); 
      break;   
     case 'music': 
      alert('music!'); 
      break; 
     default: 
      alert(itemType); 
     } 
    } 
    }); 
});