javascript - 使用 YUI 事件监听器在 Jquery 中移动 DOM 元素？

Question

我有一个 DOM 元素，其中的元素上有 YUI 事件监听器。我试图让 DOM 元素出现在页面的不同部分，但是一旦我这样做，我似乎就丢失了在 YUI 中设置的事件。有谁知道解决这个问题的方法吗？

Answer 1

我面临着完全相同的问题。我在同一个应用程序中同时拥有 YUI 和 jQuery，因为它是一个最初使用 YUI 构建的先前存在的应用程序，并且我正在尝试使用 jQuery 来实现使用 jQuery 更容易实现的功能。

根据我的经验，您不应该仅仅通过移动元素来丢失 YUI 事件:

jQuery("#element1").before(jQuery("#element2"));

另一方面，如果您尝试克隆和交换元素，则会出现问题，even using the clone function with arguments for cloning events as well :

var copy_to = $(to).clone(true);
var copy_from = $(this).clone(true);
$(to).replaceWith(copy_from);
$(this).replaceWith(copy_to);

据此，我想说不可能克隆保留使用 YUI 绑定(bind)的事件的元素，但可以移动它们。

编辑:这就是我移动和交换两个绑定(bind)了 YUI 事件的 DOM 元素的方式:

  function makeElementAsDragAndDrop(elem) {
     $(elem).draggable({
         //snap : '#droppable',
         snapMode : 'outer',
         revert : "invalid",
         helper: function(event) { // This is a fix as helper: "original" doesn't work well
            return $(this).clone().width($(this).width());
          },
         zIndex : 100,
         handle: ".title"
     });
     $(elem).droppable({
         //activeClass : "ui-state-hover",
         //hoverClass : "ui-state-active",
         drop : function(event, ui) {
            var sourcePlaceholder = $( "<div/>", 
               {
                  id: "sourcePlaceholder"
               }).insertBefore(ui.draggable);

            var targetPlaceholder = $( "<div/>", 
               {
                  id: "targetPlaceholder"
               }).insertBefore(this);

            $(ui.draggable).insertBefore(targetPlaceholder);
            $(this).insertBefore(sourcePlaceholder);

            sourcePlaceholder.remove();
            targetPlaceholder.remove();
         },
         tolerance : "pointer"
     });
  }

如您所见，上面的代码是我使用 jQuery 编写的 DIV 拖放实现的一部分。

希望有帮助。

PS:如果有人知道如何使用 YUI 克隆保留事件绑定(bind)的元素，请告诉我们!