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

Moving a DOM element in Jquery with YUI event listeners?

本文关键字：移动 DOM 元素 Jquery YUI 事件 监听器 使用      更新时间：2023-09-26

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

我也面临同样的问题。我有两个YUI和jQuery在同一个应用程序，因为它是一个以前存在的应用程序最初与YUI和我试图使用jQuery实现一个功能，这是更容易实现与jQuery。

根据我的经验，您不应该仅仅通过移动元素而丢失YUI事件: 
jQuery("#element1").before(jQuery("#element2"));

另一方面，如果您尝试克隆和交换元素，即使使用clone函数和克隆事件的参数也会出现问题:

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

根据这一点，我想说它是不可能克隆元素保存事件绑定使用YUI，但它是可能的移动它们。

编辑:

这就是我如何移动和交换两个绑定了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，请让我们知道!
相关文章：