Question

我有一个带有JQueryUI的拖放界面，当用户将一个元素拖放到其中一个容器中并放下它时，我想显示一些有关所选项目的信息。

$(document).ready(function()
 {
  $( ".element" ).draggable({snap: ".elementContainer"});
  $( ".elementContainer" ).droppable({
   drop:function(){
    $("table").append('<tr><td class="elementContainer ui-droppable"></td></tr>');
   }});
 });

所以它正在使用UI droppable类创建一个新元素。我的问题是，为什么它不会在新创建的元素上触发“drop”事件？

Answer 1

它不会触发，因为当您运行$(".elementContainer").droppable(...)时，它会将可放置的小部件绑定到当时存在的.elementContainer元素，您需要运行再次使用该类新创建的元素插件。

这样的事情：

$(document).ready(function() {
  $( ".element" ).draggable({snap: ".elementContainer"});

  $.fn.bindDroppable = function() {
    return this.droppable({
      drop:function(){
        $('<tr><td class="elementContainer"></td></tr>')
          .find(".elementContainer").bindDroppable().end().appendTo("table");
      }
    });
  };
  $(".elementContainer").bindDroppable();
});

这是减少代码的插件版本......但基本前提是您需要在所有新 .droppable(...options...)元素上调用<td>，因为小部件代码之前没有在它们上运行...因为它们还不存在。

JQuery UI“drop”事件不会触发？

1 个答案: