問題タブ [jquery-ui-draggable]

ドロップ可能な領域にドロップできるドラッグ可能な要素があります。要素が削除されると、drop関数が呼び出されます。

私のドラッグ可能な要素：

要素がドロップされるかどうかを知る必要があるのdata-noteidは、ドロップ可能な領域の値と相対位置です。したがって、要素を左上隅にドロップする場合、x/y座標は0/0である必要があります。

ここで完全に機能する例を作成しました：http：//jsbin.com/utivo5/2/

したがって、通常は次のような属性にアクセスできます。

しかし、この場合に得られるのはundefined。

誰かが私がそれらにアクセスする方法を知っていますか？呼び出された関数のパラメータであるeventか、それで可能である必要があると思いますか？！uidrop

よろしくお願いします、ティム。

jQuery UI .draggable() を使用している場合、Webkit ブラウザーでテキスト選択を無効にできないようです。Webkit 固有の css (-webkit-user-select および -webkit-user-drag) をさまざまな組み合わせで使用しようとしましたが、うまくいきませんでした。

問題を再現できる jsfiddle は次のとおりです: http://jsfiddle.net/dmosher/8ZGLR/

ドラッグアンドドロップの例を探しています。ドラッグアイテムには、2つのドロップ可能な領域と一致する必要がある2つの異なる領域があります。

例：

青いドラッグアイテムは、赤い子がそれぞれ緑の領域に着地する位置にドロップされない限り、元に戻してほしいです。

理想的には（私が経験しているように）jquery uiを使用したいのですが、事前のおかげで、どのjavascriptライブラリでも問題ありません。

jQuery と Jquery UI を使用して、ドラッグおよびドロップ可能な領域があり、ドラッグ可能なアイテムには次のヘルパーがあります

addedヘルパーをドロップ可能エリアに移動するにはどうすればよいですか?

私はここに別のウェブサイトへのショートカット（「タイル」）があるサイトを持っていました。

これで、「タイル」の位置をCookieに保存できるようにするスクリプトができました。これにより、ユーザーが後日Webサイトに戻ったときに、タイルの配置が保存されます。

そのスクリプトは次のとおりです。

これで、以前にアクセスせずに最初にWebサイトをロードすると、タイルはすべて、幅5タイル、高さ2タイルのグリッドに配置されます。

ボタンをクリックするEditと、タイルはドラッグ可能でサイズ変更可能になります。

したがって、新しいDoneボタンをクリックしてブラウザウィンドウを終了し、新しいブラウザウィンドウでWebサイトに戻ると、位置は保存されますが（これも混乱することがあります）、ある種の「非表示」リンクがあります。残ったタイルの元のグリッドを形成します。

なぜこうなった。たとえば、元の編集で、左上のGoogleタイルを元の位置から移動し、YouTubeタイルの下に配置したとします。

次に、戻ってきて、Googleタイルがあったブラウザウィンドウ上の位置にマウスを合わせると、まだそこにあるかのようにクリックできます。pointer編集モードでないときにリンクにカーソルを合わせるとカーソルが表示されるようにCSSを設定しているので、これは簡単にわかります。

リンクを元の位置から削除する方法はありますか？

仕事のスケジュールを選択するのに役立つWebアプリケーションがあります。基本的に私はiTunesをエミュレートしようとしています。各作業スケジュールは、並べ替え可能なリストアイテムです。リストアイテムは、個別の順序付けされていないリストにajaxでロードされます。左側には、プレイリストのように機能する順序付けされていないリストが表示されたサイドバーがあります。作業スケジュールを上下にドラッグアンドドロップして、順序を変更したり、別のリストに移動したりできます。左側のリストをクリックすると、そのリストのリストアイテムのみが表示されます。Firefoxではすべてがうまく機能します。ただし、他のブラウザを使用している場合は、左側のサイドバーの行リストをクリックすると、非常に遅くなります。リストアイテムの数が増えると、速度が遅くなります。

私のjqueryコードはドキュメントの先頭にありますこれがテストページのhtmlです。

そして、クリックした行リストに応じて行を表示する機能はこちらです。

IDを大文字と小文字の2回使用するのが問題だと思ったので、サイドバーリストのアイテムIDを「top_picks」、関連するコンテナリストを「top_picks-list」にしてみましたが、それでも同じです。問題。

ご意見ありがとうございます！

更新 私のタイトルは実際には正しく表現されていないと思います。jqueryアニメーションの問題があります。linecontainer div内の8つの異なるリストに、ajaxによって多数のリストアイテム（場合によっては最大300）がロードされています。ユーザーは、リストアイテムをサイドバーにドラッグアンドドロップして、リストアイテムが属するものを変更できます。

ここに示すJavaScriptハンドルは、ユーザーがクリックしたリストを決定し、すべてのリストアイテムを非表示にして、目的のリストに属するリストアイテムのみを表示します。

ページ上の300のリスト項目すべてを見つけてアニメーション化するよりも、ページ上の8つの順序付けられていないリストをターゲットにしてそれらをアニメーション化する方が速いと思いました。繰り返しますが、Firefoxはこれを実行するのに高速ですが、クロム、サファリは遅すぎます。これは、ブラウザがDOM要素を見つける方法と関係があるはずです。

プログラムで jQuery ドラッグ操作を中止するにはどうすればよいですか?

jQuery UI を使用して、ユーザーはドラッグ操作を開始します。ドラッグ中に、ドラッグされた要素を削除する非同期イベントが発生します (たとえば、タイマーベースの更新)。更新では、削除された要素からのエラーを回避するために、更新の前に次のようなことをしたいと思います:

しかし、それはうまくいかなかったようです。

要素をドロップ可能な領域にドラッグする小さなアプリに取り組んでいます。最近 jQuery 1.5 にアップグレードしたところ、要素を 1 回しかドラッグできないことがわかりました。

つまり、ユーザーが誤ってドロップ可能な要素以外の場所にドロップした場合、再度ドラッグすることはできません。

jQuery 1.5 と jQuery UI 1.8.9 を使用しています。

.each 関数を使用して、各要素にドラッグ可能な状態を設定します。

他の誰かがこの問題を抱えていますか? 私はjQueryの初心者ですが、助けてくれてありがとう:)

[編集]デリゲート関数を使用してクリックイベントを同じオブジェクトに委任したことも追加する必要があります。以前は問題ありませんでしたが。

写真のWebページの場合、参照画像の上に半透明の長方形をドラッグすることにより、縮小された参照画像で関心のある領域を選択できる画像ビューアを実装しています。選択した領域は、100% の拡大率で領域を表示する 2 番目の画像ビューアに継続的に「ミラーリング」されます。

私のソリューションは XHTML/CSS と jQuery を使用しており、基本的なバージョンは既に動作していますが、初期化時に問題が発生し、解決できません。divjQuery UIドラッグ可能を使用してドラッグ可能にされた対象領域を設定しました。対象領域を画像に制限するために、containmentプロパティを使用しました。

ただし、最初は div は画像の外に表示されます。div関心のある領域をドラッグし始めるとすぐにdiv、画像の内部にスナップされ、それ以降は適切に封じ込めが適用されます。私が見つけたすべてのサンプルコードは、ネストされた s による包含を示しています。私の知る限り、画像 (XHML ) には他の要素を含めることができないdivため、これは私のケースには当てはまりません。img

divWeb ページが最初にレンダリングされるときに、ドラッグ可能な対象領域が既に含まれていることを強制する方法はありますか?

コードから問題を説明するために最小限のコードに抽出しました。以下を参照してください。

ヒントをいただければ幸いです。

乾杯、クリスチャン

サイズ変更可能な行が取り出された場合、これは正常に機能しますが、これらの画像をドラッグおよびサイズ変更可能にしたいのですが、同じ要素に両方の属性を持たせようとすると、おかしな動作が発生します。誰かがこれを機能させる方法を知っていますか?

ありがとう！