1

「observe( "click",...」の代わりに「onclick = ...」を使用するという私の問題をすべて特定した3つの優れた回答に感謝します

しかし、受け入れられた回答の賞は、ドラッグされた要素をマークするためにクラス名を追加するメカニズムについてPaolo Bergantinoに渡さなければなりません。

私の HTML には、各行に画像リンクがあるテーブルがあります。

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

付属の 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 !!!
  }
});

私の考えでは、画像をクリックするとリンクをたどる必要がありますが、ドラッグすると別のことが起こるはずです。

実際には、画像がドラッグされるとハンドラーが呼び出されますが、リンクは引き続きたどられます。

間違ったイベントをキャンセルしていると思います。

要素がドラッグされた後にリンクがたどられないようにするにはどうすればよいですか?

編集：event.stopgreystateの提案を試した後に追加

FireFox、Apacheなどで機能する基本的なソリューションができました。以下の私自身の回答を参照してください。

しかし、私はまだ IE7 (できれば IE6) のソリューションを探しています。

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

4

6 に答える 6

2 
// 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;
    }
});
于 2009-02-24T11:40:13.833 に答える
1

わかりました、私が見つけた方法は、以前の投稿と同様に「ドラッグステータス」変数を​​使用することですが、IE7 と FF の両方で動作します。

Prototype を使用すると、ドラッグする html 要素のクリック イベントにオブザーバー関数を追加して、そこにevent.stop();. このアクションは、ハンドラー関数に渡されるイベント オブジェクトを拡張 (つまり、Prototype 化) することで、すべての Prototype アドオン メソッドを充実させstop()、Prototype が管理するように、実行中のブラウザーを気にせずにメソッドを呼び出すことができるようにします。あなたのためのこの側面。

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

<!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 イベントとして扱っていたことです (パラメーターの仕様はこちら、ページの下部を参照)。これは FF では問題ありませんが、IE ではまったく問題ありません。わずかに（しかし確実に）異なる方法です。その上、onEnd:ハンドラーで扱っていたイベントはクリックイベントではなく、onendイベントでした。

于 2009-02-24T11:30:04.407 に答える
1 
<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 変数よりもエレガントだと思います。

于 2009-02-24T12:18:51.510 に答える
0

これをやってみてください

$$( ".thumbnail a" ).each(
  function( tag )
  {
    tag.onclick = function( ev )
    {
      if ( drag_occurred )
      {
        ev.cancelBubble = true;
        if (ev.stopPropagation) ev.stopPropagation();
      }
      drag_occurred = false;
    }
  }
);
于 2009-02-23T18:39:57.857 に答える
0

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

プロトタイプにはstop()、デフォルトのアクションを防止するだけでなく、イベントのバブリングもキャンセルするイベント用のメソッドがありますpreventDefault()。

于 2009-02-17T08:00:58.007 に答える