タグ付けされた質問 「drag-and-drop」

私が抱えている問題dragleaveは、要素の子要素をホバーすると要素のイベントが発生することです。また、dragenter親要素を再びホバーするときにも発生しません。 簡単なフィドルを作成しました：http : //jsfiddle.net/pimvdb/HU6Mk/1/。 HTML： <div id="drag" draggable="true">drag me</div> <hr> <div id="drop"> drop here <p>child</p> parent </div> 次のJavaScriptを使用： $('#drop').bind({ dragenter: function() { $(this).addClass('red'); }, dragleave: function() { $(this).removeClass('red'); } }); $('#drag').bind({ dragstart: function(e) { e.allowedEffect = "copy"; e.setData("text/plain", "test"); } }); divそこに何かをドラッグすると、ドロップを赤くしてユーザーに通知します。これは機能しますが、p子にドラッグすると、dragleaveが起動され、divはもう赤ではありません。ドロップに戻ってdivも、再び赤くなることはありません。div赤にするためには、ドロップから完全に移動し、再度ドラッグしてドロップする必要があります。 dragleave子要素にドラッグするときに発火を防ぐことは可能ですか？ 2017年の更新： TL; DR、pointer-events: none;以下の@HDの回答に記載されているCSS を検索します。これは、最新のブラウザーとIE11で機能します。

300 javascript  jquery  html  drag-and-drop  jquery-events 

これがBorlandのTurbo C ++環境で行われるのを見てきましたが、現在取り組んでいるC＃アプリケーションでどのように対処すればよいかわかりません。注意すべきベストプラクティスや落とし穴はありますか？

251 c#  winforms  drag-and-drop 

私のページにhtml5ドラッグアンドドロップアップローダーを追加しています。 ファイルがアップロード領域にドロップされると、すべてがうまく機能します。 ただし、誤ってファイルをアップロード領域の外にドロップすると、ブラウザはローカルファイルを新しいページのようにロードします。 この動作を防ぐにはどうすればよいですか？ ありがとう！

194 javascript  jquery  html  drag-and-drop 

現在のところ、この質問は、Q＆A形式には適していません。事実、参考文献、専門知識によって回答が裏付けられることを期待していますが、この質問は、討論、議論、投票、または拡張ディスカッションを求める可能性があります。この質問が改善され、場合によっては再開できると思われる場合は、ヘルプセンターにアクセスしてください。 7年前休業。 単一のJSスクリプトを含め、単純なスニペットを使用してフォームを有効にすることができる、きちんとしたjQueryプラグインはありますか？このようなもの： $j('#MyForm').enableDragDropUploads('.upload-area') アップロードターゲットはフォームのアクションです。 どのようなソリューションでも、（従来の参照方法を使用して）通常のファイルフィールドが使用できなくなることはありません。 一度に必要なファイルは1つだけですが、もちろん複数のオプションがあることは悪いことではありません。 ドラッグドロップアップロードの例をいくつか見つけました：http: //www.appelsiini.net/2009/10/drag-and-drop-file-upload-with-google-gears http：//www.appelsiini net / 2009/10 / html5-drag-and-drop-multiple-file-upload しかし、そこにあるコードはプラグインとしてセットアップされていません。それを変更することはおそらくそれほど難しくありませんが、他の誰かがすでにその仕事をしていて、単に私のGoogle検索を回避しているなら、そうすることも無意味です。 理想的には、純粋なHTML5 / jQueryソリューションを探しています。 Google Gearsは許容されますが、Flashソリューションは許容されません。

174 jquery  file-upload  drag-and-drop  html  google-gears 

概観 次のHTML構造があり、dragenterおよびdragleaveイベントを<div id="dropzone">要素にアタッチしました。 <div id="dropzone"> <div id="dropzone-content"> <div id="drag-n-drop"> <div class="text">this is some text</div> <div class="text">this is a container with text and images</div> </div> </div> </div> 問題 私は上のファイルをドラッグすると<div id="dropzone">、dragenter期待通りにイベントが発生します。私は子要素の上に私のマウスを移動すると、しかし、のような<div id="drag-n-drop">、dragenterイベントが焼成された<div id="drag-n-drop">要素と、その後dragleaveのイベントがために解雇される<div id="dropzone">要素。 <div id="dropzone">要素に再びカーソルを合わせると、dragenterイベントが再び発生しますが、これはクールですがdragleave、子要素の残りのイベントが発生するため、removeClass命令は実行されます。 この動作には2つの理由で問題があります。 dragenter＆dragleaveをアタッチしているだけな<div id="dropzone">ので、子要素にこれらのイベントもアタッチされている理由がわかりません。 <div id="dropzone">子の上にカーソルを置いている間も要素をドラッグしているのでdragleave、発砲したくありません！ jsFiddle jsFiddleをいじくり回します。 http 質問 だから...どうすれば、<div id="dropzone">要素の上にファイルをドラッグしているときにdragleave、子要素の上にドラッグしていても起動しないようにすることができます...要素を離れたときにのみ起動する必要があり<div id="dropzone">ます。要素の境界内の任意の場所でホバリング/ドラッグしても、イベントはトリガーされませんdragleave。 これは、少なくともHTML5のドラッグアンドドロップをサポートするブラウザーでは、ブラウザー間の互換性が必要なので、この答えは適切ではありません。 GoogleとDropboxはこれを理解しているようですが、それらのソースコードは縮小化/複雑化されているため、実装からこれを理解することができませんでした。

163 jquery  html  file-upload  drag-and-drop  dom-events 

最近では、ファイルを特別なコンテナーにドラッグアンドドロップして、XHR 2でアップロードすることができます。ライブプログレスバーなど。ここに例があります。 しかし、それほどクールにしたくない場合もあります。私がしたいことは、ドラッグ＆ドロップでファイルにある-一度に多くの- 標準のHTMLファイルの入力に：<input type=file multiple>。 それは可能ですか？ファイルドロップから正しいファイル名（？）でファイル入力を「埋める」方法はありますか？（フルファイルパスは、ファイルシステムのセキュリティ上の理由から使用できません。） どうして？通常のフォームを提出したいので。すべてのブラウザとすべてのデバイス。ドラッグアンドドロップは、UXを拡張および簡素化するための段階的な拡張です。標準ファイル入力（+ multiple属性）を持つ標準フォームがそこにあります。HTML5拡張機能を追加したいのですが。 編集 私は知っているいくつかのことができますブラウザ時々ファイル入力自体にファイルをドロップ（ほとんど常に）。私はChromeが通常これを行うことを知っていますが、時々失敗して現在のページにファイルをロードします（フォームに入力している場合は大きな失敗）。私はそれをだまして、ブラウザで証明したいのです。

163 html  file-upload  drag-and-drop 

私の質問は2つあります。WinFormsの標準ソリューション（この説明を行う前にChristophe Geersが提供したもの）ではなく、WPFによって提供される両方のソリューションが簡単になることを願っています。 最初に、マウスクリック+ドラッグイベントをキャプチャして処理せずにウィンドウをドラッグ可能にする方法はありますか？ウィンドウがタイトルバーによってドラッグ可能であることを意味しますが、ウィンドウを設定せずにドラッグできるようにしたい場合、タイトルバーのドラッグを処理するものにイベントを何らかの方法でリダイレクトする方法があります。 ？ 次に、ウィンドウ内のすべての要素にイベントハンドラーを適用する方法はありますか？同様に、ユーザーがクリックしてドラッグする要素に関係なく、ウィンドウをドラッグ可能にします。明らかに、ハンドラーを手動で追加せずに、すべての単一の要素に追加します。どこかで一度だけやるの？

111 c#  wpf  user-interface  drag-and-drop 

HTML5を使用してドラッグアンドドロップでアップロードするウェブアプリケーションを構築しています。ファイルをdivにドロップし、もちろんdataTransferオブジェクトをフェッチしています。これにより、FileListが得られます。 今、いくつかのファイルを削除したいのですが、どうすればいいのか、それが可能かどうかさえわかりません。 できればFileListから削除するだけです。私は彼らの役に立たない。しかし、それが不可能な場合は、代わりにFileListとやり取りするコードにチェックを書き込む必要がありますか？それは面倒そうです。

110 javascript  html  drag-and-drop  filelist 

WPFアプリケーションに画像ファイルをドロップする必要があります。現在、ファイルをドロップするとイベントが発生しますが、次に何をするかわかりません。画像を取得するにはどうすればよいですか？あるsenderオブジェクトは、画像やコントロール？ private void ImagePanel_Drop(object sender, DragEventArgs e) { //what next, dont know how to get the image object, can I get the file path here? }

106 c#  .net  wpf  image  drag-and-drop 

ユーザーがドラッグアンドドロップすることもできる運転中の車があるビューが欲しいです。これを行うための最良の大規模戦略は何だと思いますか？車両を表すビューから、またはより大きなビューからタッチイベントを取得するのが最善ですか？ドラッグアンドドロップに使用した、満足できる簡単なパラダイムはありますか？異なる戦略の欠点は何ですか？

93 iphone  ipad  ios  drag-and-drop  touch 

期待どおりにドロップイベントがトリガーされていないようです。 ドラッグされている要素がターゲット要素の上にリリースされると、ドロップイベントが発生すると思いますが、そうではないようです。 私は何を誤解していますか？ http://jsfiddle.net/LntTL/ $('.drop').on('drop dragdrop',function(){ alert('dropped'); }); $('.drop').on('dragenter',function(){ $(this).html('drop now').css('background','blue'); }) $('.drop').on('dragleave',function(){ $(this).html('drop here').css('background','red'); })

92 javascript  jquery  events  drag-and-drop  jquery-events 

jQueryでドラッグ可能な要素がページにあります。これらの要素には、別のページ（通常のリンクなど）に移動するクリックイベントがありますか？ クリックを許可しながら、そのような要素をドロップしたときにクリックが発生しないようにするための最良の方法は、ドラッグアンドドロップ状態ではありませんか？ 並べ替え可能な要素でこの問題が発生しますが、一般的なドラッグアンドドロップの解決策があるとよいと思います。 私は自分で問題を解決しました。その後、Scriptaculousにも同じ解決策が存在することがわかりましたが、おそらく誰かがそれを達成するためのより良い方法を持っています。

85 javascript  jquery  events  drag-and-drop  jquery-ui-sortable 

私はこれを行う例を見たことがありません。これはAPI仕様では許可されていませんか？ 写真のフォルダツリー全体をアップロードするための簡単なドラッグアンドドロップソリューションを探しています。

82 html  file-upload  drag-and-drop 

Imageコントロール付きのウィンドウを持つ小さなWPFアプリケーションがあります。画像コントロールは、ファイルシステムからの画像を表示します。ユーザーが画像をドラッグしてデスクトップまたは任意の場所にドロップして保存できるようにしたい。正常に動作しています。 しかし、ユーザーがドラッグしたときに、マウスカーソルと共に小さな画像のサムネイルを表示したいと思います。Windowsファイルエクスプローラーから別の場所に画像をドラッグするのと同じです。それを達成する方法は？ ドラッグ/ドロップの現在の動作 望ましい行動 これが私のXAMLコードです <Grid> <Image x:Name="img" Height="100" Width="100" Margin="100,30,0,0"/> </Grid> ここにC＃コードがあります public partial class MainWindow : Window { string imgPath; Point start; bool dragStart = false; public MainWindow() { InitializeComponent(); imgPath = "C:\\Pictures\\flower.jpg"; ImageSource imageSource = new BitmapImage(new Uri(imgPath)); img.Source = imageSource; window.PreviewMouseMove += Window_PreviewMouseMove; window.PreviewMouseUp += Window_PreviewMouseUp; …

8 c#  wpf  drag-and-drop