Scriptaculousのdraggables：要素がドラッグされたときのonClickアクションをキャンセルする必要があります

StackOverflow https://stackoverflow.com/questions/552905

質問

すべての「onclickの= ...」の代わりに「観察（ 『』、...」をクリックします。

を使用しての私の問題を特定し3つの優れた答えてくれてありがとう

しかし、受け入れ答えのための賞は私にいくつかのより多くの作業を保存したドラッグされた要素を、マークするクラス名を追加する仕組みのためパオロBergantinoに行かなければならない！

<時間>

私のHTMLで、私は、各行の画像リンクを持つテーブルを持っています。

<table class="search_results">
  <tr>
     <td class="thumbnail"><a href="..."><img src="..." /></a></td>
...

Anがjavascriptのファイルは、画像をドラッグ可能にするコードが含まれて含まれます。

$$( ".thumbnail a img" ).each(
  function( img )
  {
    new Draggable( img, {revert:true} );
  }
);

とドラッグの終了を検出するための単純なハンドラ

Draggables.addObserver({
  onEnd:function( eventName, draggable, event )
  {
    // alert ( eventName ); // leaving this in stops IE from following the link
    event.preventDefault(); // Does Not Work !!!
    // event.stop(); // Does Not Work either !!!
  }
});

私の考えでは、画像をクリックすると、リンクが従うべきということですが、それがドラッグされたときに他の何かが起こる必要があります。

実際には何が起こるかの画像がドラッグされたときにハンドラが呼び出されますが、リンクがまだ続いているということです。

私は私が間違ってイベントをキャンセルしていますことを推測します。

どのように私は要素がドラッグされた後に守られてからリンクを防ぐことができますか？

<時間>

編集：greystateの提案を試みた後event.stop追加

<時間>

私は今、以下の私自身の答えを参照してくださいFireFoxのは、Apacheなどのために働く基本的な解決策を持っています。

しかし、私はまだIE7（そして、できればIE6）のためのソリューションを探しています。

もう一つの問題はIEで画像をドラッグするツールチップが表示されたときに、画像にマウスポインタから外れてしまうということです、あなたはマウスを離すとドラッグを再取得するには画像をもう一度クリックする必要があります。だから私も、その問題を解決するのに役立つかもしれない任意のアイデアを探しています。

役に立ちましたか？

解決 

<script>
document.observe("dom:loaded", function() {
    $$( ".thumbnail a img" ).each(function(img) {
        new Draggable(img, {
            revert: true,
            onEnd: function(draggable, event) {
                $(draggable.element).up('a').addClassName('been_dragged');
            }
        });
    });

    $$(".thumbnail a").each(function(a) {
        Event.observe(a, 'click', function(event) {
            var a = Event.findElement(event, 'a');
            if(a.hasClassName('been_dragged')) {
                event.preventDefault();
                // or do whatever else
            }
        });
    });
});
</script>

は、Firefox、IE上で私のために動作します。それは一種のあなたの「マーカー」のアイデアを使用していますが、私はクラスですでにドラッグされた要素をマーキングjavascriptの変数よりもエレガントだと思います。

他のヒント

// for keeping track of the dragged anchor
var anchorID = null;

// register a click handler on all anchors
$$('.thumbnail a').invoke('observe', 'click', function(e) {
    var a = e.findElement('a');
    // stop the event from propagating if this anchor was dragged
    if (a.id == anchorID) {
        e.stop();
        anchorID = null;
    }
});

$$('.thumbnail a img').each(function(img) {
    new Draggable(img, { revert:true });
});

Draggables.addObserver({
    onStart: function(eventName, draggable, e) {
        // store the dragged anchor
        anchorID = e.findElement('a').id;
    }
});

[OK]を、私が見つけた方法は、あなたの前のポストに似た「ドラッグ状態」変数、であるが、それはIE7とFFの両方で動作します。

プロトタイプを使用して、あなたはそこevent.stop();に伝える、ドラッグしたいhtml要素のクリックイベント用のオブザーバ機能を追加することができます。このアクションは、拡張（つまり、プロトタイプ-IZE）ハンドラ関数に渡されるイベントオブジェクトは、これアドオン方法すべてのプロトタイプのそれを豊かにし、プロトタイプとして、それはに実行しているブラウザを気にせずにstop()メソッドを呼び出すことができ作りますあなたのためのこの側面を管理します。

ここに私の例のコードは次のとおりです。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
      <script type="text/javascript" src="lib/prototype.js"></script>
      <script type="text/javascript" src="src/scriptaculous.js"></script>
    <title>Draggables Test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  </head>
  <body>
    <div id="dragme"><a href="http://www.google.it">Ok, you can drag this one.</a></div>
    <script type="text/javascript">
        function processIt(event) {
            if ( isDragging ) {
                event.stop();
            }
            isDragging = false;
        }

        new Draggable('dragme', { revert: false });
        var isDragging = false;

        $('dragme').observe('click', processIt );
        Draggables.addObserver({
            onDrag:function( eventName, draggable, event ) {
                isDragging = true;
            }
        });
        </script>
  </body>
</html>

の違いは、あなたの元の例では、標準のDOMイベントとイベント（参照パラメータ仕様<のhref =「http://wiki.github.com/madrobby/scriptaculous/draggables-object」のrel =の治療されたことです「nofollowをnoreferrer」>ここを、それは少し（間違いなく）別の方法でイベントを扱うように、しかしすべてではないIEで、FFとokですページ）の一番下。その上で、あなたはonEnd:ハンドラに扱ったイベントは、ののイベントが、のonend のイベントをクリックします。

をwas't

私は今、この権利をテストすることはできませんが、私はそれを見るように、あなたは<img>はドラッグ作っている、まだあなたは<a>要素のクリックを観察しているので、問題は、クリックイベントがリンクにバブルアップということはおそらくあり、これがデフォルトのアクションを実行します。

プロトタイプは、ほかにデフォルトのアクションを防ぐためのイベントstop()方法があり、また、イベントバブリングをキャンセルする - 。あなたが代わりにpreventDefault()のonEnd機能でそれを試みることができる。

いくつかの実験の後、私は次の修正プログラムを作ってみました。

しかし、それは少し厄介そうですし、それの IE7で動作しません。の

のように、私はそれに満足未満です

編集

また、「ev.stop」を試してみましたev.preventDefaultに代わるものとして「falseを返します」。すべては、IE以外のすべてのブラウザで働いて、同じ結果を与えます。

非コメント警告がでpreventDefaultもIEで実行されていることを証明している

ハンドラの呼び出し順序の潜在的な問題を回避するためにonDragハンドラにonEndハンドラを変更します。

$$( ".thumbnail a img" ).each(
  function( img )
  {
    new Draggable( img, {revert:true} );
  }
);

var drag_occurred = false;
$$( ".thumbnail a" ).each(
  function( tag )
  {
    tag.onclick = function( ev )
    {
      if ( drag_occurred )
      {
        // alert( "!" );
        ev.preventDefault();
      }
      drag_occurred = false;
    }
  }
);

Draggables.addObserver({
  onDrag:function( eventName, draggable, event )
  {
    drag_occurred = true;
  }
});

これをやって試してみてください 
$$( ".thumbnail a" ).each(
  function( tag )
  {
    tag.onclick = function( ev )
    {
      if ( drag_occurred )
      {
        ev.cancelBubble = true;
        if (ev.stopPropagation) ev.stopPropagation();
      }
      drag_occurred = false;
    }
  }
);
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top