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声明为可拖动（如果后面没有其他功能）导致可以为你做的事情。
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);
      }
    }
  });
});

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

1 个答案: