jQuery拖放然后打开特定于每个列表项的警报

jQuery drag and drop then open alert specific for each list item

本文关键字：列表 于每个 然后 拖放 jQuery      更新时间：2023-09-26

我对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"
  });
});

请帮忙！

代码存在一些问题。 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);
      }
    }
  });
});
相关文章：