jquery.ui.draggable 中国語ドキュメント (原文翻訳)_jquery

[原文翻訳]
JQuery UI ドラッガブル プラグインは、選択した要素をマウスでドラッグできるようにするために使用されます。
ドラッガブル要素は CSS の影響を受けます。 ui-draggable、ドラッグ中の CSS: ui-draggable-dragging.
単にドラッグするだけでなく、完全なドラッグ アンド ドロップ機能が必要な場合は、ドラッグ可能なドロップ機能を提供する JQuery UI の Droppable プラグインを参照してください。目標:
すべてのコールバック関数 (開始、停止、ドラッグなどのイベント) は 2 つのパラメーターを受け入れます:
event: ブラウザーのネイティブ イベント
ui: 次の主な属性を持つ JQuery ui オブジェクト
ui.helper: ドラッグされる要素の JQuery ラッパー オブジェクト。ui.helper.context はネイティブ DOM 要素を取得できます。
ui.position: ui.helper (つまり、ドラッグする要素) 相対。親要素 (独自の要素を含む、最上位の場合は本文に対応) のオフセットに、値はオブジェクト {top, left} ----つまり、ui.position を使用できます。要素と親要素を取得する .top トップの現在のオフセット
ui.offset: ui.position に同意します。ここでは、ブラウザーのコンテンツ領域の左上の境界線からのオフセットを表します (コンテンツ領域であることに注意してください) HTML のボディ領域ではありません。デフォルトでは、さまざまなブラウザがオフセットを基準にオフセットされます。)
[Option]
addClasses:
[Type]Boolean (ブール値) )
[デフォルト値] true
[影響]
ドラッグ可能な要素を ui-draggable スタイルで修飾するかどうかを設定するために使用されます。主に、.draggable() を通じて多数 (数百) の要素を初期化する際のパフォーマンスを最適化します。ただし、このオプションの設定は ui-draggable-dragging スタイルには影響せず、ドラッグ プロセス スタイルを変更します。
true は ui-draggable スタイルが要素に追加されることを意味します。
false は ui-draggable スタイルを意味します。 style は要素に追加されません。
[コード例] ドラッグ可能なその他のオプションの初期化、属性値の取得、属性値の設定。特殊な関数を除き、詳細は説明しません。コードを貼り付けるだけです。
[初期化]
$('.selector').draggable({ addClasses: false });
UI ドラッグ可能なスタイルを追加せずに、.selector によって選択された要素をドラッグ可能なコントロールにレンダリングします
[Get属性値]
var addClasses = $('#draggable').draggable('option', 'addClasses');
.selector セレクターで選択されたドラッグ可能コントロールの addClasses オプションの値を取得します。
[属性値の設定]
$('.selector').draggable('option', 'addClasses', false);
.selector セレクターで選択されたドラッグ可能コントロールの addClasses オプションの値を に設定します。 false.
appendTo:
[種類]要素、セレクター (HTML 要素オブジェクトまたはセレクター)
[デフォルト値]'parent' 親要素
[影響]
ui を指定するために使用されます。ドラッグプロセス中のコントロールのヘルパー コンテナ。デフォルトでは、ui.helper は最初に定義されたドラッグ可能オブジェクトと同じコンテナを使用します。これは親要素です。
[コード例]
[初期化]
$( '.selector').draggable ({ appendTo: 'body' });
[属性値を取得]
//getter
var appendTo = $('.selector').draggable('option' , 'appendTo');
[属性値を設定]
//setter
$('.selector').draggable('option', 'appendTo', 'body');.
axis:
[Type]String、Boolean (利用可能な値は 'x'、'y'、false)
'x': 水平方向のみドラッグ可能
'y': ドラッグのみ可能垂直方向
false: 両方を実行できます。水平方向、垂直方向にドラッグすることもできます。
[デフォルト値] false、ドラッグの方向を制限しません
[影響]
ドラッグ中の方向を制限します。
[コード例]
[初期化]
$('.selector').draggable({ axis: 'x' });
[属性値の取得]
var axis = $( '.selector').draggable( 'option', 'axis');
[属性値を設定]
$('.selector').draggable('option', 'axis', 'x') ;
cancel:
[Type] selector
[Default value]':input, option'
[Impact]
セレクターを使用してこのタイプの要素を指定すると、ドラッグ可能なコントロールにレンダリングできません.
[コード例]
[初期化]
$('.selector').draggable({ cancel: 'button' });
[属性値の取得]
var cancel = $('.selector').draggable('option', 'cancel');
[属性値を設定]
$('.selector').draggable('option', 'cancel', 'button ');
connectToSortable: このオプションはsortableと連動する必要があり、
[Type] セレクター
[デフォルト値]':input, option'
[影響] については改めて説明します。
セレクターを使用してこのタイプの要素を指定すると、ドラッグ可能なコントロールにレンダリングできません。
[コード例]
[初期化]
$('.selector').draggable({ cancel: 'button' });
[属性値を取得]
var cancel = $('.selector').draggable('option', 'cancel');
[属性値を設定]
$('. selector').draggable('option', 'cancel', 'button');
containment:
[Type] selector, element, string, array.
セレクター: 選択のみ可能コンテナによって制約される要素
要素: 指定された要素内でのみドラッグ可能
文字列:
親: 親コンテナ内でのみドラッグ可能
ドキュメント: 現在の HTML ドキュメント内で、ドキュメントがブラウザ ウィンドウの範囲を超えると、スクロール バーが自動的に表示されます。
ウィドウ: 現在のブラウザ ウィンドウのコンテンツ領域内でのみドラッグできます。現在のウィンドウの範囲を超えてドラッグしても問題は発生しません。表示されるスクロール バー ..
配列: [x1, y1, x2, y2] は、[開始水平座標、開始垂直座標、終了水平座標、終了垂直座標] の形式で領域を区切ります。このように指定すると、値は現在のブラウザ ウィンドウのコンテンツ領域の左上隅を基準としたオフセット値になります。
false: ドラッグの有効範囲を制限しません
[デフォルト値]false
[影響]
指定されたドラッグ可能コントロールのアクティブ領域に影響します。
[コード例]
[初期化]
$('.selector' ).draggable({ containment: 'parent' });
[属性値を取得]
var containment = $('.selector').draggable('option', 'containment');
[属性値を設定]
$('.selector').draggable ('option', 'containment', 'parent');
cursor:
[種類] string.
[デフォルト値] 'auto'
[Influence]
影響の指定 このスタイルを設定した後、コントロールの元の要素は、指定されたカーソル スタイルをサポートする必要があります。指定された値は指定されたカーソル スタイルをサポートしていないため、元の要素のデフォルトのカーソル スタイルが使用されます。たとえば、 $('input[type=button]').draggable({cursor: 'crosshair' });ボタンは十字マウス スタイルをサポートしていません。デフォルトの形式で表示されます。
[コード例]
[初期化]
$('.selector').draggable({ カーソル: 'crosshair' });
[属性値を取得]
var Cursor = $('.selector').draggable(' option', 'cursor');
[属性値を設定]
$(' .selector').draggable('option', 'cursor', 'crosshair');
cursorAt:
[種類] オブジェクト
オブジェクトの上、左、の 1 つまたは 2 つを設定して位置を決定します。
[デフォルト値]false
[影響]
In 値が false の場合、コントロール上に表示されるマウスの位置。 )、設定されている場合、マウスの位置は、コントロール自体の左上隅からのオフセットになります。例: $('.selector').draggable('option)。 ', 'cursorAt', {left: 8, top: 8}); 次に、ドラッグプロセス中に、マウスは下から右に 8 ピクセルオフセットして移動します。
[コード例]
[初期化]
$('.selector').draggable({cursor: 'crosshair' });
[属性値の取得]
var Cursor = $('.selector')。ドラッグ可能('オプション', 'カーソル');
[属性値を設定]
$('.selector').draggable(' オプション', 'カーソル', 'クロスヘア');
遅延:
[型]整数、単位はミリ秒
[デフォルト値]0
[影響]
ドラッグ可能コントロール マウスの左ボタンを押してからドラッグ効果が現れるまでの遅延 このオプションを使用できます。望ましくないクリックによって引き起こされる無効なドラッグを防ぐため、具体的な効果は次のとおりです。マウスの左ボタンが押されてから、遅延で指定された時間までに 1 回のドラッグが行われ、マウスの左ボタンが放されなかった場合、ドラッグは有効であると見なされます。それ以外の場合、ドラッグは無効とみなされます。
[コード例]
[初期化]
$('.selector').draggable({遅延: 500 });
[属性値を取得]
var late = $('.selector').draggable('option', 'delay');
[属性値を設定]
$('.selector').draggable('option', '遅延', 500);
距離:
[タイプ] 整数、単位はピクセル
[デフォルト値] 1
[効果]
マウスの左ボタンが押されたときからドラッグ可能なコントロールが開始されます。このオプションを使用すると、予想されるクリックによって引き起こされる不要な無効なドラッグを防ぐことができます。特定の効果は、マウスの左ボタンを押したときにのみ 1 回ドラッグすることです。マウスによって生成されたドラッグが距離で指定された値に達すると、有効なドラッグとみなされます。);
[属性値を取得]
var distance = $('.selector').draggable('option', ' distance');
[属性値を設定]
$('. selector').draggable('option', ' distance', 30);
grid:
[type] array [x, y]、x は水平サイズを表し、y は垂直サイズを表します。単位はピクセル
[デフォルト値]false
[影響]
ドラッグ可能なコントロールはグリッド形式でドラッグされます。つまり、ドラッグ プロセス中の単位は、指定された配列で記述されるグリッドと同じ大きさです。 guid オプションによる .
[コード例]
[初期化]
$('.selector').draggable({ Grid: [50, 20] });
[属性値の取得]
var Grid = $('.selector').draggable('option', 'grid');
[属性値を設定]
$('.selector').draggable('option', 'grid', [50, 20]);
ハンドル:
[タイプ]セレクターまたは要素
[デフォルト値]false
[効果]
ドラッグをトリガーする要素を指定します。 : id=window を持つ div がドラッグ可能なコントロールとして設定され、そのハンドルが div 内の id=title を持つスパンに設定されます。この場合、id=title を持つスパン上でのクリックとドラッグのみが有効になります。ドラッグ可能なコントロールの子要素である必要があります。
[コード例]
[初期化]
$('.selector').draggable({ handle: 'h2' });
[Get属性値]
var handle = $('.selector').draggable('option', 'handle');
[属性値を設定]
$('.selector').draggable (' option', 'handle', 'h2');
ヘルパー:
[タイプ] 文字列または関数
文字列値:
'original': ドラッグ可能なコントロール自体を移動できます
' clone': ドラッグ可能なコントロール自体のクローンを作成し、元の位置を変更せずに移動します
関数は DOM 要素を返す必要があります。ドラッグ プロセスを表示するには、関数によって返された DOM 要素の移動を使用します。
[デフォルト値] 'original'
[影響]
ドラッグ処理中にユーザーが現在のドラッグ位置を知るのに役立つ要素です。
[コード例]
[初期化]
$(' .selector' ).draggable({ helper: 'clone' });
[属性値を取得]
var helper = $('.selector').draggable('option', 'helper');
[属性値を設定]
$('.selector').draggable('option', 'helper', 'clone');
iframeFix:
[Type] ブール値またはセレクター、選択結果セレクターは iframe 要素である必要があります
[デフォルト値] false
[影響]
これにより、ドラッグプロセス中にマウスポインタが iframe 領域内で移動することがなくなり、マウス移動イベントに対する iframe のデフォルトの応答が防止されます。 .
true に設定すると、ドラッグ プロセス中に現在のページ上のすべての iframe の Mousemove イベントがブロックされます。セレクターが設定されている場合、指定された iframe の Mousemove イベントがブロックされます。 ]
[初期化]
$('.selector').draggable({ iframeFix: true });
[属性値の取得]
var iframeFix = $('.selector').draggable ('option' , 'iframeFix');
[属性値を設定]
$('.selector').draggable('option', 'iframeFix', true);
不透明度:
[型] float ポイント値
[デフォルト値]false
[影響]
ドラッグ中のヘルパー (ドラッグ時にマウスに追従するコントロール) の不透明度。
[コード例]
[初期化]
$('.selector').draggable({ opacity: 0.35 });
[属性値の取得]
var opacity = $('.selector').draggable('option ', 'opacity');
[属性値の設定]
$('.selector').draggable('option', 'opacity', 0.35);
refreshPositions:
[型] Boolean
[デフォルト値]false
[影響]
true に設定すると、ドロップ可能なすべての位置が各マウス移動イベントで計算されます。
注: このオプションは主に、高度な動的ページの表示を解決するために使用されます。
[コード例]
[初期化]
$('.selector').draggable({ freshPositions: true });
[属性値の取得]
var freshPositions = $('.selector').draggable('option', 'refreshPositions');
[属性値を設定]
$('.selector').draggable('option', 'refreshPositions ' , true);
revert:
[型]Boolean、String
[デフォルト値]false
[影響]
ドラッグ後に元の位置に戻るかどうかに影響します。
> true: ドラッグが停止するたびに、要素は自動的に元の位置に戻ります。
'invalid': ドロップ可能であり、正常にドロップされない限り、要素は元の位置に戻りません。 : 無効を除くその他の状況。
[コード例]
[初期化]
$('.selector').draggable({ revert: true });
[属性値を取得]
var revert = $('.selector').draggable('option', 'revert');
[属性値を設定]
$('. selector').draggable('option', 'revert', true);
revertDuration:
[型] 整数
[デフォルト値] 500
[効果]
revert(return to元の位置)、単位はミリ秒です。revert オプションが false に設定されている場合、この属性は無視されます。 { revertDuration: 1000 });
[属性値を取得]
var revertDuration = $('.selector').draggable('option', 'revertDuration');
[属性値を設定]
$('.selector').draggable('option', 'revertDuration', 1000);
スコープ:
[タイプ] 文字列
[デフォルト値]'default'
[影響]
このオプションはスコープを記述し、同じ名前のドロップ可能オプションと組み合わせて使用​​されます。ドロップ可能の受け入れオプションは、受け入れ可能なドラッグ可能なコントロールを設定するために使用されます。同じである必要があります。スコープ内のドラッグ可能とドロップ可能のみが相互にドラッグ アンド ドロップできます。
$('#draggable_a').draggable({scope: 'a'});
$ ('#draggable_b') .draggable({scope: 'b'});
$('#droppable_a').droppable({scope: 'a'});
$('#droppable_b') .droppable({scope: 'b'});
ドロップ可能なコントロールの accept オプションはデフォルトでは '*' ですが、スコープの制約により、draggable_a と draggable_b は自由に配置できるようです。
注: このオプションは、変数の名前空間と同様の意味を持ちます。これは、指定しない場合、
[コード例]
[初期化]
$('.selector').draggable({scope: 'tasks' });
[属性値を取得]
varscope = $('.selector').draggable('option', 'scope');
[属性値を設定]
$('.selector') .draggable('option', 'scope', 'tasks');
scroll:
[タイプ]Boolean
[デフォルト値]true
[効果]
true に設定すると、ドラッグプロセス中にドラッグ可能なコントロールコンテナを超えると、コンテナは自動的にスクロールバーを追加します
[コード例]
[初期化]
$('.selector').draggable({scroll: false });
[属性値を取得]
varscope = $('.selector').draggable('option', 'scope');
[属性値を設定]
$(' .selector').draggable('option', 'scroll', false);
scrollSensitivity:
[種類] 整数値
[デフォルト値] 20
[効果]
感度
の下に属するマウス ポインタは、ドラッグ可能なコントロールの移動中のマウスの位置を指します。
マウス ポインタとドラッグ可能なコントロールが配置されているコンテナの端の間の距離。
[コード例]
[初期化]
$('.selector').draggable({scrollSensitivity: 40 });
[属性を取得] value]
varscrollSensitivity = $('.selector').draggable('option', 'scrollSensitivity');
[属性値を設定]
$('.selector').draggable('option ', 'scrollSensitivity', 40);
scrollSpeed:
[型]整数値
[デフォルト値]20
[影響]
scrollSensitivityによるスクロールが発生した場合、何ピクセルになるかスクロールバーは一度にスクロールします。
[コード例]
[初期化]
$('.selector').draggable({scrollSpeed: 40 });
[属性値の取得]
varscrollSpeed = $('.selector').draggable('option', 'scrollSpeed');
[属性値を設定]
$('.selector').draggable('option', 'scrollSpeed', 40);
snap:
[型]Boolean、セレクター
[デフォルト値]false
[効果]
吸着関数。これを true に設定することは、 selector.ui-draggable. 特定の効果は、セレクターによって指定されたすべての要素に適用され、現在のドラッグ可能なコントロールは、ドラッグ プロセス中に、コンポーネントがターゲット コンポーネントに近づいているがまだ接触していない場合に吸着機能を実装することを意味します。
[コード例]
[初期化]
$( '.selector').draggable({ snap: true });
[属性を取得]値]
var snap = $('.selector').draggable('option', 'snap');
[属性値を設定]
$('.selector').draggable('option ', 'snap', true);
snapMode:
[Type] 文字列、オプションの値は次のとおりです
'inner': 指定された要素内に吸着可能
'outer' : 指定した要素の外側に吸着可能
'both': 内側と外側の両方に吸着可能
[デフォルト値]'both'
[影響]
スナップ時のモードを設定します。
>【コード例】
【初期化】
$('.selector').draggable({ snapMode: 'outer' });
   [获取属性值]
   var snapMode = $('.selector').draggable('option', 'snapMode');
   [设置属性值]
   $('.selector').draggable('option', 'snapMode', 'outer');
snapTolerance:
[类型]整数
[默认值]20
[产生影响]
   设定离目标对象的边多少像素的时候, 进行吸附.
[代码示例]
   [初始化]
   $('.selector').draggable({ snap: true });
   [获取属性值]
   var snap = $('.selector').draggable('option', 'snap');
   [设置属性值]
   $('.selector').draggable('option', 'snap', true);
stack:
[类型]对象{group: '.selector', min: 50}
[默认值]false
[产生影响]
   一次初始化一组draggable控件的时候, 将其中的一些draggable控件以给定选择器选择, 作为一组, 这时, 这一组draggable控件就可以实现当前被拖动的始终在最前效果, min用来指定这一组的z-index值的最小值.
[代码示例]
   [初始化]
   $('.selector').draggable({ stack: { group: 'products', min: 50 } });
   [获取属性值]
   var stack = $('.selector').draggable('option', 'stack');
   [设置属性值]
   $('.selector').draggable('option', 'stack', { group: 'products', min: 50 });
zIndex:
[类型]整数
[默认值]false
[产生影响]
   拖动时的helper(跟随鼠标移动的控件)的z-index值. z-index就是css中的层叠层数, 数值越大, 越在上层.
[代码示例]
   [初始化]
   $('.selector').draggable({ zIndex: 2700 });
   [获取属性值]
   var zIndex = $('.selector').draggable('option', 'zIndex');
   [设置属性值]
   $('.selector').draggable('option', 'zIndex', 2700);
[事件]
start: 拖动开始, 指鼠标按下, 开始移动.
[类型]dragstart
[回调函数接受的参数]
   event: 原生的浏览器事件.
   ui: JQuery的ui对象
   this: 当前拖动的控件DOM对象
drag: 拖动过程中鼠标移动.
[类型]drag
[回调函数接受的参数]
   event: 原生的浏览器事件.
   ui: JQuery的ui对象
   this: 当前拖动的控件DOM对象
stop: 拖动结束.
[类型]dragstop
[回调函数接受的参数]
   event: 原生的浏览器事件.
   ui: JQuery的ui对象
   this: 当前拖动的控件DOM对象
[代码示例]
初始化时设置事件.
$('.selector').draggable({
     start: function(event, ui) { alert(this); },
     drag: function(event, ui) { alert(this); },
     stop: function(event, ui) { alert(this); }
});
动态的绑定事件. 动态绑定时候, 使用的事件名就是事件的类型.
$(".selector").bind('dragstart', function(event, ui) {
   alert(this);
});
$(".selector").bind('drag', function(event, ui) {
   alert(this);
});
$(".selector").bind('dragstop', function(event, ui) {
   alert(this);
});
[方法]
destroy: 完全移除一个可拖动控件, 使其回退到该元素被初始化成可拖动控件之前的状态.
[代码示例]
   $(".selector").progressbar('destroy');
将之前初始化的.selector指定的可拖动控件销毁, 使其返回初始化之前的状态.
disable: 将可拖动控件样式改变成为失效, 与enable对应.
enable: 将可拖动控件样式改变为允许, 与disable对应.
option: 获取或设置可拖动控件的选项, 第二个参数是选项名, 第三个参数是值. 如果不指定值, 就是获取, 指定值, 就是设置.

[概要]
addClasses: UI ドラッグ可能なスタイルを追加するかどうかを設定します。
appendTo: 追加する場所を設定します。
axis: ドラッグ可能を設定します。 style 移動方向
cancel、handle: コントロール全体のドラッグ動作を制御する領域を設定します。cancel はドラッグできない領域を指定し、handle はコントロールのドラッグを制御する領域を指定します。
connectToSortable: sortable と統合する必要があります。
containment: コントロールのドラッグ可能な範囲を設定します
cursor、cursorAt: マウスのスタイルと、ドラッグ プロセス中のスペース自体に対するマウスの位置を設定します。
lay、距離: ドラッグの遅延を設定します。遅延は遅延時間を設定します。距離は遅延を設定します。目的は、誤ったクリックによる予期せぬドラッグを防止することです。
グリッド: ドラッグ処理中の移動単位を設定します (小さなグリッドで移動します)。
helper: ドラッグプロセス中にマウスの動きに従う単位を設定します。
iframeFix: ドラッグ中に iframe でオーバーレイした後のイベントの問題を解決します。
opacity: ドラッグ中のヘルパーの不透明度。
refreshPositions: 設定後のドロップ プロセス中に、すべてのマウスの動きが計算されます。 Position.
revert、revertDuration: 元に戻す動作に関連する設定。
scope: ドラッグ可能なターゲットを決定するために使用される、ドラッグ可能なドメインを設定します。
scroll、scrollSensitivity、scrollSpeed: ドラッグ可能に設定します。アニメーション プロセス中に発生するスクロール バーに関連する問題。
snap、snapMode、snapTolerance: スナップに関連するプロパティを設定します。
stack、zIndex: コントロールのレベルを設定します。