4

画像をドラッグしようとしていますが、ブラウザのデフォルトの画像ドラッグを停止するために、event.preventDefault() を使用しています。しかし、何らかの理由で、dragenter、dragover、dragend などのイベントの実行が中断されています。これはなぜですか。また、通常のドラッグ イベントを中断せずにブラウザのデフォルト機能を停止するにはどうすればよいですか。

<img src="/img/image1" id="img1"/>

jQuery

var obj=$('#ironman');  
obj.on('dragstart', function (e) {
      //e.preventDefault();
      console.log("dragstart");
  });

  obj.on('dragenter', function (e) {
      console.log("dragenter");
  });

  obj.on('dragover', function () {
      console.log("dragover");
  });
  obj.on('dragleave', function () {
      console.log("dragleave");
  });

  obj.on('dragend', function () {
      console.log("dragend");
  });

JSフィドル

4

1 に答える 1

1

要素のネイティブ ドラッグ チェーン イベントを停止しているので、これは大変なことです。これを行う理由はわかりませんが、ネイティブ ドラッグを実装する 1 つの方法は、ドラッグをキャンセルしてマウス イベントを処理することです。

var obj=$('#ironman');  
obj.on('mousedown', function (e) {
  console.log("mousedown");
  // bind to the mousemove event
  obj.on('mousemove', function (e) {
      console.log("mousemove");
  });
});

obj.on('mouseup', function (e) {
  console.log("mouseup");
  // unbind the mousemove event
  obj.unbind('mousemove');
});
obj.on('dragstart', function (e) {
  e.preventDefault();  // cancel the native drag event chain
  console.log("dragstart");
});
于 2013-09-26T20:32:36.080 に答える