問題タブ [html5-draggable]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票する
0 に答える
768 参照

html - d3.js チャート インタラクションにより、HTML5 のドラッグ アンド ドロップが機能しなくなる

HTML5 のドラッグ アンド ドロップを使用して、並べ替え可能なタブを作成しています。Angular固有ですが、正確なコードは次のとおりです: https://stackoverflow.com/a/23443028/1267778

これらのタブの 1 つに d3.js を使用した svg チャートがあります。

ソート可能性は機能しますが、グラフをクリックすると遷移が行われ、ページをリロードするまでソート可能性が失われます。

他のタブに他の svg チャートがあり、それを壊さずに操作できますが、問題の原因となったチャートはエラーなどをスローしません。何が起こったのか手がかりなしに壊れるだけです。

ドラッグを開始すると、「.dragging」クラスがまだ適用されていることに注意してください。ただし、ドラッグまたはドロップ効果はありません。タブはそのままです。

何が起こっているのか、またはどこから問題を探し始めることができるかについて何か考えはありますか? エラーがスローされないため、どこから始めればよいかわかりません.javascriptがクラッシュしない限り、ドラッグアンドドロップがチャートをクリックすることにどのように関連する可能性があるかわかりませんが、その兆候はありません.

0 投票する
0 に答える
693 参照

javascript - HTML5 ドラッグ & ドロップ 'dragover' イベント

Adobe Photoshop や Illustrator などの一般的なソフトウェアのフローティング パネル機能に似た機能を備えた Web アプリを構築しています。そのために HTML5 Drag & Drop API を使用しています。

まず、ドラッグしているパネルを更新するために、これらの線に沿って何かをしています

さて、これはすべてうまくいきます!しかし、問題は、次のように、別のブロック要素でドラッグオーバーイベントをキャッチしたいことです。

問題は、ドラッグ要素の位置を更新する限り、イベントが発生しないことです。しかし、ドラッグ要素の再配置をコメントアウトすると、次のようにイベントが発生します

さて、私には、ドラッグしている要素がイベントの発火の邪魔になっているように感じます。

ブロック要素をドラッグし続けながら、 dragoverイベントも発生させるにはどうすればよいですか?

JSFiddleをチェックしてください。

Chrome 36.0.1985.125 での作業

ありがとう!

0 投票する
2 に答える
1325 参照

javascript - JavaScript で article 要素に EventListener を追加する

すべての記事要素に EventListener を追加しようとしているので、クリックするとドラッグ可能な要素に変わります。

このタスクでは jQuery を使用していません。

試行 1:

試行 2:

両方で、「Uncaught TypeError: undefined is not a function」というメッセージが表示されます。これは通常、何かが欠けていることを示していますが、読んだ後、何がわからないのですか。

0 投票する
3 に答える
5009 参照

angularjs - 「クリック可能」および「ドラッグ可能」領域の両方

ng-repeat 内に、要素をクリックしてドラッグできる要素のリストがあります。クリックすると表示され、ドラッグすると...要素をドラッグします。

ドラッグすると、ドラッグする要素の数が円で表示されます。

私の問題は、クリックするとドラッグサークルが表示されることです。一方、ドラッグするのではなく、クリックするだけです。

クリックとドラッグ アクションを区別するために、(マウスで) 長押しアクションのように、クリック時に 2 秒のように設定する方法はありますか?

この投稿に似ていますが、クリック時のドラッグを防止したいと思います(Angularの方法で)。

ここにいくつかのマークアップがあります:

ngDraggableディレクティブを使用しています。

それが役立つ場合は、ここにいくつかのコード:

ng-click-or-drag のようなディレクティブがあるとよいかもしれません。クリックが 2 秒を超えると、ドラッグとして解釈されます。

0 投票する
1 に答える
216 参照

html - ドラッグ可能な画像のキャンバス描画

ドラッグ可能な画像を含む html ページでは、マウス ポインターを使用して図形または線を描画する必要があります。画像と図形の描画は行われますが、ドラッグ可能な画像では行われません
。その間、図形を作成して線を描くことができましたが、画像の上に線を描こうとすると
背景に戻ります。
現在使用されているキャンバスとhtml5を使用して同じことを達成する方法を誰かが提案できますか?

0 投票する
1 に答える
5151 参照

javascript - HTML5 のドラッグ アンド ドロップ、ドロップされた div はドロップされた位置から少し移動します

次の作業コードがあります(このフィドルも参照してください):

}

ここでは、メインの div 内でのみ、色付きの div をドラッグ アンド ドロップできます。問題は、この赤い div がドロップした位置から少しジャンプすることです。これは、マウス ev.clientX と Y を使用しているためだと思います。では、DIV がドロップされた位置に留まるようにするにはどうすればよいでしょうか?