1

クライアントは、div 全体をドラッグ可能にするように要求しました。div にはテキストと画像が含まれています。div を<li>タグに変換し、Mootools のドラッグ可能なグッズを使用してすべてを機能させました。これは、クライアントが画像をクリックして IE でドラッグを開始するまで続きます。次に、ブラウザは画像をドラッグしようとしていると判断し、親 li のドラッグ アンド ドロップ イベントを無視します。

画像がドラッグ可能になるのを止めるために何ができるかについての手がかりはありますか? または、少なくとも親のonmousedownイベントをトリガーするには?

サンプル HTML を次に示します。

<ul class="asset_list">
  <li id="1"><img src="test1.jpg" />Blah blah blah</li>
  <li id="2"><img src="test2.jpg" />Blah blah blah</li>
  <li id="3"><img src="test3.jpg" />Blah blah blah</li>
</ul>

ドラッグ アンド ドロップに使用する JS の一部を次に示します。

// Set up drap and drop
$$( 'ul.asset_list li' ).each( function( item ){
 item.removeEvents();
 item.addEvent('mousedown', function(e) {
  e = new Event(e).stop();

  // Create our clone of the asset for dragging
  var clone = this.clone( true, true );
  clone.removeEvents();
  clone.addClass( "dragging" );
  clone.setStyles(this.getCoordinates()); // this returns an object with left/top/bottom/right, so its perfect

  var drag = clone.makeDraggable({
    droppables: [TrailStream.playlist],
    precalculate: true,
    revert: true,
   }
  }); // this returns the dragged element

  drag.start(e); // start the event manual
 });
});
4

2 に答える 2

1

5 年後、私は同じ問題に遭遇し、これが私にとって最良の解決策であることがわかりました。

子要素をドラッグすると、親要素の 'dragleave' が発生する

あなたの場合：

.asset_list * {
    pointer-events: none;
}

シンプルで効果的:)

于 2015-10-01T09:51:39.857 に答える
0

幅、高さ、境界線などについて画像が持っていたのと同じスタイルで画像をスパンに変換し、背景画像をインラインスタイルに設定することで、これを回避しました。IE は、「画像」ではなく他の HTML 要素と同じように扱うようになったため、ドラッグは修正されました。アクセシビリティに完全に対応しているわけではありませんが、ドラッグ アンド ドロップにも対応していません。

于 2009-12-18T15:35:12.897 に答える