コンテナにラッピング可能なjQuery Ui -- javascript フィールド と jquery フィールド と html フィールド と css フィールド と jquery-ui フィールド 関連 問題

jQuery UI Draggable Snapping into a Container












1
vote

問題

日本語

問題の説明( fiddle ):

jQuery UIの<コード> .draggable() 機能を使用して、赤い要素を青いコンテナの内側にスナップさせようとしています。それは完全に内側の(すなわち両端)の中ではなく、最初に1つの端にスナップしています。他の軸にスナップするまでドラッグし続ける必要があります。

どの角度でスナップし始めると、それが最終的な位置に移動したい(コンテナの内側に完全に)。スナップが開始されたとき(すなわち、イベントが発生しているとき)を検出し、それを使用してレッドボックスを手動で再配置する方法はありますか?

例コード:

html:

<事前> <コード> <div id="box"></div> <div id="container"></div>

JavaScript:

<事前> <コード> $('#box').draggable({ snap: '#container', snapMode: 'inner', snapTolerance: 50 });

css:

<事前> <コード> #box { background: red; width: 100px; height: 100px; position: absolute; z-index: 1; } #container { width: 102px; height: 102px; position: absolute; top: 50%; left: 50%; margin-top: -51px; margin-left: -51px; border: 1px solid blue; }
英語

Description of Problem (Fiddle):

Using jQuery UI's .draggable() function, I'm trying to make the red element snap to the inside of the blue container. It's snapping first to one edge rather than completely inside it (i.e. to both edges). You must continue dragging it until it snaps to the other axis.

When it begins to snap at any angle, I want it to go to its final position (fully inside the container). Is there a way to detect when a snap begins (i.e. the event is fired) and then use that to manually reposition the red box?

Example Code:

HTML:

<div id="box"></div> <div id="container"></div> 

JavaScript:

$('#box').draggable({     snap: '#container',     snapMode: 'inner',     snapTolerance: 50 }); 

CSS:

#box {     background: red;     width: 100px;     height: 100px;     position: absolute;     z-index: 1; } #container {     width: 102px;     height: 102px;     position: absolute;     top: 50%;     left: 50%;     margin-top: -51px;     margin-left: -51px;     border: 1px solid blue; } 
</div
              
       
       

回答リスト

2
 
vote
vote
ベストアンサー
 

FIDDLE: http://jsfiddle.net/w8yaz/9/

スナップイベントヘルプ: jQuery UI - Draggable 'Snap'イベント 今、スナップした後、より多くのドラッグギンが可能ではありません。これは別の頭痛になります。

注:ドラッグイベントをキャンセルするためにマウスアップをトリガーすることはできません。これは既知のJavaScriptエラーを引き起こしています。 http://jsfiddle.net/w8yaz/7/

JavaScript:

<事前> <コード> $('#box').draggable({ snap: '#container', snapMode: 'inner', snapTolerance: 50, drag: function (event, ui) { if ($(this).hasClass('snapped')) { var position = $('#container').position(); $(this).css({ top: position.top, left: position.left }); return false; } else { var draggable = $(this).data("uiDraggable"); $.each(draggable.snapElements, function (index, element) { if (element.snapping) { draggable._trigger("snapped", event, $.extend({}, ui, { snapElement: $(element.item) })); } }); } }, snapped: function (event, ui) { $(this).addClass('snapped'); } });
 

Fiddle: http://jsfiddle.net/W8yaz/9/

Snap event help: Jquery UI – draggable 'snap' event

Right now, after snapping there is no more draggin possible. This will be another headache.

Beside note: you can't trigger mouseup to cancel the drag event, this is causing a known javascript error, can be seen in a previous fiddle: http://jsfiddle.net/W8yaz/7/

JavaScript:

$('#box').draggable({     snap: '#container',     snapMode: 'inner',     snapTolerance: 50,     drag: function (event, ui) {         if ($(this).hasClass('snapped')) {             var position = $('#container').position();              $(this).css({                 top: position.top,                 left: position.left             });             return false;         } else {             var draggable = $(this).data("uiDraggable");             $.each(draggable.snapElements, function (index, element) {                 if (element.snapping) {                     draggable._trigger("snapped", event, $.extend({}, ui, {                         snapElement: $(element.item)                     }));                 }             });         }     },     snapped: function (event, ui) {         $(this).addClass('snapped');     } }); 
</div
 
 
   
   

関連する質問

3  jQuery Ui Draggable 'Stop'イベントは何度も呼びましたか?  ( Jquery ui draggable stop event called too many times ) 
私は私が「停止」イベントを誤解しているか、正しくないように感じますが、要素がドラッグされている間に数回呼び出されているようです。 <事前> <コード> makeAllDragable = function () { $(".test-table").d...

0  jQueryにおけるテーブルナビゲーションのパフォーマンスの向上  ( Improving performance of table navigation in jquery ) 
ASP.NET GridViewのキーを使用してテーブルナビゲーションを作成しようとしています。これが私がこれまでのものを持っているものです。それはうまく機能していますが、それは遅いです。それを見て、可能な限りパフォーマンスを向上させる方法を教えてください。...

0  IDのないjQuery UIダイアログ  ( Jquery ui dialog without id twice ) 
複数のダイアログを1ページに置きようとしています - 彼らは複数回起きることができる必要があります。 ASP.NETを使用しているので、ダイアログに入るコンテンツのIDは閉じ込められています。ダイアログを複数回実行するための例はすべて、コンテンツIDを使用して...

8  jQuery UIタブの背景色  ( Jquery ui tabs background color ) 
タブ領域の背景を変更しようとしています。好きなタブのリストがあります、そして、私は各タブの色を変更する方法を知っていますが、そのすべての背景。通常は濃い灰色の色で、タブは薄い灰色です。私はそれらの色を明るい青、または薄緑色のどちらかに変えたいと思いました、そし...

1  どのようにしてjQuery UI入力ボタンにアイコンを入れることができますか?  ( How can i put icons on a jquery ui input button ) 
jQuery UIボタンのマニュアルに基づいて、次のようにしました。 <事前> <コード> <jquery>$("#test").button({ icons: { primary:'ui-icon-gear' } });</jquery> <input i...

0  jQuery UIの入れ子になったタブ - Ajaxコンテンツを単一のDIVにロードする  ( Jquery ui nested tabs load ajax content into a single div ) 
ALL、 jQuery UIの入れ子タブを使用しています。このような構造を考えてみましょう:2つのメインタブがあります:動物、鳥。動物の下で、「猫」、「犬」の2つのタブがあります。クリックされたときには、「猫」と「犬」の両方をAjaxでロードする必要があり...

2  ASP.NETボタンのjQuery UIボタンスタイル  ( Jquery ui button style for asp net button ) 
どうすれば<a href="https:/jqueryui.com/button//jqueryui.com/button//jquery uiボタンスタイル</a> asp.netボタンに使用できますか?どうやって私の肌やその他の方法でやることができますか?...

239  関数からjQueryダイアログのボタンを無効にするにはどうすればよいですか。  ( How can i disable a button in a jquery dialog from a function ) 
私はユーザーが特定の情報を入力する必要があるjQueryダイアログを持っています。この形式では、「続行」ボタンがあります。この「続行」ボタンを使用してください。すべてのフィールドにコンテンツがあると、それ以外の場合は無効になります。 フィールドステータスが変更...

3  JQueryUIのASP.NET:サーバーサイドイベントは起動しません  ( Asp net with jqueryui server side event not firing ) 
私はページがjQuery UIダイアログを利用しているASP.NETページを持っています。ユーザーがページ内のボタン(<コード> btnGo )をクリックしているときは、ユーザーがログインしているかどうかを確認します。ログインしていない場合は、ログインするjQ...

3  jQuery ui.slider:ハンドルを表示/非表示にするには、イベントを追加する  ( Jquery ui slider add click event to display hide handle ) 
私はJavaScriptとjQueryにはまったく新しいです。私のプログラミングの知識は...存在しません、私はちょうどcssクラスを置き換えるかdivを切り替えるようないくつかの簡単な作業で少し前に始めました。だから私はここに新しいビーの質問をすることによっ...




© 2022 cndgn.com All Rights Reserved. Q&Aハウス 全著作権所有