問題タブ [html5-draggable]

tl;dr Chrome で表示したときにドラッグできる要素が、Chrome パッケージ アプリで表示したときにドラッグできないの<webview>はなぜですか?

編集：

Chrome 29.0.1521.3 dev でテストしましたが、パッケージ化されたアプリ内ではまだ運がありませんが、Chrome 自体は正常に動作します。

Chrome パッケージ アプリを試して、WebView の機能をテストしたかったのです...どうやら、WebView 内に読み込まれたページは、Chrome 自体から表示されているかのように動作するはずです (いくつかの機能が無効になっていることを除けば)。

単一の<webview>. 内側のページには、<ol>3 つの<li>要素を持つ が表示されます。それぞれ<li>にdraggable="true"属性がありますが、何を試しても、要素はドラッグにまったく反応しません。

Chrome Packaged Apps には、ユーザーがテキストなどを選択するのを避けるために多くの CSS 宣言があることは知っていますが、何かがドラッグされるのを止めるものはありますか?

マニフェスト.json

Main.js

Test.html

WebViewPage.html

上記の LI は、ユーザーがドラッグしたときに少なくとも何かを行う必要がありますが、まったく反応しません。

初めて HTML5 と Javascript をいじっていて、行き詰まっています。簡単に言えば、私の質問は、で始まる JS ファイル内でメソッド (html) を呼び出すにはどうすればよいかということです。

$(関数() { ... }

基本的に、私は開始するコード プロジェクトを提供する azure を使用しましたが、ファイルが提供されたとき、次で始まる page.js がありました。

Azure サービスには、Kanban boardesc Web ページを作成するために使用する必要がある非常に単純なデータベースがあります。

タスク要素をドラッグ可能にし、それを処理するイベントを追加しましたが、この JS ファイルでイベント メソッドを作成できず、HTML にイベント メソッドがある場合、.js のメソッドを呼び出すことができません。

私は仕事について尋ねましたが、誰も $(function() { ... } を見たことがないようで、必要な情報がどこにも見つかりません。

ありがとう

Draggable、Resizable、Float、および Aloha Editor で使用できる Ext.Component を作成しようとしています。

現在、私は試しました：

これはドラッグ可能ではありませんが、編集は機能します。

これにより、サイズを変更してドラッグすることができますが、うまく機能せず、編集できません。

ここでも編集はできますが、ドラッグはできません。

サイズ変更またはドラッグ イベントのハンドルがオンになった瞬間に、アロハ エディターが動作を停止するように見えますが、ハンドルがない場合、ドラッグおよびサイズ変更は動作を停止します。アドバイスはありますか、または以前にこれに遭遇した人はいますか?

ここには同様の質問がたくさんあることは知っていますが、それらを実行に移すと、同じ問題で解決します。

2 つの角度ディレクティブ (ドラッグ アンド ドロップ) と 1 つの角度ファクトリ (dndAPI) があります。これはすべて、github の fisshy の Angular Drag and Drop に基づいています。

イベントにデータを追加することで、最終的にFirefoxが動きを受け入れてドラッグできるようになりましたが、デフォルトの動作（およびそのデータをURLとしてロード）を実行しないようにすることはできません。また、jsfiddleでまったく機能しなかったことをお詫びします...まったく。誰かが私がとんでもないことをしているのかどうかわからない場合は、もう一度やり直します.

私は他の質問で推奨されていることをたくさんしました。dragenter と dragleave スポットに event.preventDefault() を追加しました。そして、それがうまくいかなかったとき、私はそれらをどこにでも追加しました. 私のドロップ方法に関係していると感じています。バインディングの先頭に event.prevendDefault() を配置すると、残りのコードは実行されません。

見落としがちな些細なことでも、アドバイスいただけると助かります。

ありがとう！

html5ドラッグ アンド ドロップ APIを使用してカレンダーを作成しています。

と を使用dragEnterしdragLeaveて、受信要素のスタイルを設定し、ドロップパビリティを決定しています。

受信側のドロップ可能な要素には子がありdragLeave、子要素をドラッグすると呼び出されます。この問題は既知であり、ここで説明されています。

私が試みた解決策は、子dragLeaveにイベントを追加しdragEnter、ロジックをparentViewに戻すことでした。

これがコードです。http://jsbin.com/iHaNuPo/17

問題は、子の「dragEnter」が親の「dragLeave」の前に呼び出されることです。

これがイベントの順序です。

これはバグですか？

dragLeave子供の上にカーソルを置いたときに親のイベントが発生するのを防ぐ Ember 風の方法を知っている人はいますか?

dragLeaveまたは、イベントが発生する順序を修正する方法はありますdragEnterか?

HTML5ネイティブのドラッグアンドドロップを捨てて、jquery uiのドラッグ可能/ドロップ可能を使用する必要がありますか?

編集

これは、Woody's answer による実際の例です。

http://jsbin.com/OjAGabUj/22

ドラッグ可能な HTML5 リストの実装に取り​​組んでおり、問題が発生しています。

基本的に、要素をドラッグするときはいつでも、今入力した要素の直前または直後に、ドラッグしている要素を挿入します。これは、マウスを動かすと、要素がマウスの下の位置に移動し続けることを意味します。(visibility: hidden要素に設定したため、空白として表示されます。) 要素をドロップすると、要素の位置を記述した AJAX 呼び出しがサーバーに送信され、サーバー上で移動が実行されます。

問題は、何らかの理由でドロップ イベントが発生せず (ハンドラーのブレークポイントがヒットしない)、ドラッグ イメージが開始した場所にスナップバックすることです。(もちろん、要素はページ上で移動したため、新しい場所に再表示されますが、drop が発生しないため、サーバーには変更が通知されません。) 何が起こっているか知っている人はいますか? 通常の答えは「dragenter/dragover を呼び出す必要があります」ですがpreventDefault()、私はすでにそれを行っています。

jQuery 1.10.2 を使用していますが、Safari 7.0.1 と Firefox 26.0 の両方でこの動作が見られます。ちなみに、Rails 4.0.2 はこのプロジェクトのフレームワークであり、jquery_ujs とターボリンクを使用しています。

関連コード:

canDropIn()は現在、常に を返すスタブですtrue。sendMovedItem()AJAX 呼び出しを行う関数です。コンソールにエラーはありません。

http://jsfiddle.net/asutosh/82qum/

JS は次のとおりです。

上記のフィドルでは、列の並べ替えを含むテーブルを作成したいのですが、列ヘッダーをドラッグ可能に設定できますが、ヘッダーの画像のみをドラッグしているときに、列全体の画像をドラッグ画像として表示する必要があります、それに関する提案は役に立ちます。

ドラッグ可能なオブジェクトを作成するために、再開されたこのサイトのチュートリアルに従いました。ここにコード自体があります。私の目標は、ドラッグ可能なアイテム (意思決定に使用されるアイテム) とドラッグ不可能な 3 つの形状 (選択肢) を備えたゲームを作成することです。

ドラッグできない 3 つのオブジェクトを作成する方法がわかりません。ドラッグできないように別の関数 (つまり、fillSquare) で 3 つの正方形を作成しようとしましたが、ドラッグ可能なアイテムを移動すると、ゲームの目的に反して消えてしまいます。アイテムを画面上に保持するには、キャンバスの状態のいくつかを使用する必要があると確信していますが、どうやってそれを行うかについて混乱し続けています。以下のコードは、上記のリンクにあるものを短縮したものです。どんな助けでも大歓迎です。