1

内部の要素に YUI イベント リスナーを持つ DOM 要素があります。ページの別の部分に DOM 要素を移動させようとしていますが、これを行うと、YUI で設定されたイベントが失われるようです。誰もこれを回避する方法を知っていますか?

4

1 に答える 1

-1

私はまったく同じ問題に直面しています。私は同じアプリに 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 を使用してバインドされたイベントを保持する要素を CLONE することはできませんが、MOVE することは可能です。

編集: これは、YUI イベントがバインドされている 2 つの 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 を使用してバインドされたイベントを保持する要素を複製する方法を誰かが知っている場合は、お知らせください。

于 2013-03-12T11:38:17.367 に答える