問題タブ [html5-draggable]

私は単純な HTML5 ドラッグ アンド ドロップ要素に取り組んでいます。ここに私の JSFiddle があります: http://jsfiddle.net/e4ogxcum/3/

これを編集して、ツールバーをページの半分にドロップできないようにしたいと思います。これは可能ですか？

つまり、次のように、ツールバーがページの途中でドロップされるのを防ぎたいと思います。

これが私のコードの全文です：

;

ドラッグ アンド ドロップ機能を使用してフレーム 1 にファンシー ツリーをロードしました。facnytree でフレーム 1 のみでドラッグ アンド ドロップできます。

その方法を提案してください。HTML 5のドラッグアンドドロップのようなもの....任意の場所/任意のiframe/フレーム上のfancytreeノードの....fancy treeはそれをサポートしますか? そうでない場合;そのための微調整は何ですか?

以下の一連の要素にドラッグ可能な JQueryUI をアタッチしようとしています。

ドラッグ可能な初期化コード:

要素は次のように表示されます。

項目の 1 つをマウスでクリックするとすぐに、Firefox で次のエラーが発生します。

マウスを動かすたびにブラウザがサスペンドし、上記の複数のエラーが発生し、クリックした要素がこのようになります。これは、ドラッグを実行する前です。

MVC 5 と Entity Framework 6 を使用して、ユーザーがレポートを提出し、それにカテゴリを割り当てることができる Web アプリケーションを作成しています。レポートには複数のカテゴリを含めることができ、カテゴリには複数のレポートを含めることができるため、多対多の関係になります。

Entity Framework はブリッジ テーブルを作成しますが、エンティティ間の関係を管理するためのビューの足場としてはあまり役に立ちません。

そのため、の編集ビューと作成ビューでは、このチュートリアルReportの機能を実装して、割り当てられたカテゴリと使用可能なカテゴリを含む 2 つの MultiSelectList ボックスを作成しました。カテゴリは、あるリストから別のリストに移動され、いくつかの JavaScript と、コントローラーのカスタム コードを使用して、データベースを更新します。

これは正常に動作していますが、私が本当に必要としているのはドラッグ アンド ドロップ アプリケーションです。ユーザーは、Category利用可能なカテゴリを含むサイドバーからをドラッグしReportて、それを割り当てることができます。

JQuery Draggable and Droppable プラグインをインストールしましたが、後で HTML5 のドラッグ アンド ドロップ機能を発見しました。私は多くの優れたチュートリアルを見つけ、ページ上でいくつかの基本的なドラッグ アンド ドロップ機能を実行することができましたが、基礎となるデータベースの更新について説明したチュートリアルはありませんでした。リストボックスで行ったように、割り当てられたカテゴリをコントローラーに戻す良い方法を見つけるのに本当に苦労しています。

これは私がこれまでに持っているものです:

Categoryこれにより、あるリストから別のリストにドラッグアンドドロップできますが、Report保存すると、ReportController ActionResult で割り当てられたカテゴリをキャッチしてデータベースを更新することができません。string[] assignedCategoriesこれがリストボックスの場合と同じようにバインドされることを期待して、パラメーターを作成しましたid="assignedCategories"が、このパラメーターは常にnullです。

Report.CategoriesMVC と Entity Framework を使用して、コレクションにデータを入力し、HTML5 のドラッグ アンド ドロップ機能でデータベースを更新する最良の方法は何ですか? ヘルプや優れたチュートリアルへのリンクをいただければ幸いです。

更新: assignedCategories に適切なフォーム入力フィールドを使用していませんでした。モデル バインダーは ID ではなく名前を探しています。そのため、assignedCategories は null でした。そのため、非表示の入力フィールドを作成name="assignedCategories"し、割り当てられたカテゴリにカテゴリがドロップされるたびに JavaScript で値を更新します。これで、割り当てられた CategoryID のリストを収集し、コントローラーで処理できるようになりました。

それでも、これを行うためのより良い方法があるはずです。割り当てられたカテゴリをドロップするには、どのようなフォーム入力を使用できますか?

HTML5 ネイティブのドラッグ アンド ドロップを使用しています。

親コンテナに対するドラッグ可能な要素の位置を見つけるのに問題があります。

タスクの概要

「位置：相対」divがあり、「ドロップ可能な領域」と見なされます。この div 内には、ドラッグ可能としてマークした「位置: 絶対」画像要素がいくつかあります。これらの画像をユーザーが自由に動かせるようにしたい。

要素の位置を設定するために、「dragend」にリスナーがいます。

end top / left 変数は、ピクセルではなくパーセンテージ ベースである必要があります。

現在の試行

以下に私の試みを示します。

そして、ここに私が望んでいたことのJSFiddleがあり、各セグメントが何をすることを期待していたかを示すコメントが付いています:

https://jsfiddle.net/oL8yd9Lr/

たぶん、私は間違った木、間違った森を探しているのでしょう。ガイダンスをいただければ幸いです。

行をドラッグできる HTML テーブルがあります。この回答に従って、私はdragoverイベントを「キャンセル」しています。

MDNごとに、すべての適切な場所に電話をかけpreventDefault()ています (と思います)。

ドラッグ アンド ドロップは、Chrome と Safari で完全に機能します。Firefox では、ドラッグ アンド ドロップが機能し、Firefox は新しい URL にリダイレクトします。

スニペットはjsfiddle.net/8d96vpws/3/でも入手できます

Firefox が場所を変更しないようにするにはどうすればよいですか?