jQueryEasyUI でドラッグアンドドロップイベントを使用する方法-jsチュートリアル-php.cn

jQueryEasyUI でドラッグアンドドロップイベントを使用する方法

清浅

リリース： 2018-12-12 09:02:09

オリジナル

2467 人が閲覧しました

jQueryEasyUI のドラッグイベントは、プロキシ要素を設定することでドラッグできます。ドラッグ要素は、X.Y 軸を基準にしてドラッグするように設定したり、ドラッグを停止するタイミングなどを設定したりできます。

jQuery の easyui はとても使いやすいプラグインですが、その機能は実に強力です。基本的なドラッグと配置を実現するための -in は一定の参考値を持っており、皆様のお役に立てれば幸いです。

【おすすめコース：jQueryEasyUIチュートリアル】

jQueryEasyUI でドラッグアンドドロップイベントを使用する方法

Draggable(ドラッグ)

Draggable は、ドラッグアンドドロップ機能を実装するために使用される easyui のプラグインで、コントロール上でドラッグアンドドロップ効果を実現できます。

これには次の属性値があります:

は、ドラッグ時に使用されるプロキシ要素を指します。 clone に設定すると、関数が指定されている場合は clone 要素がプロキシとして使用され、jQuery オブジェクトを返す必要があります。。 revert はブール値で、true に設定すると、要素がドラッグ後に開始位置に戻ることを意味します。 (デフォルト値は false) cursor ドラッグ時の CSS カーソル、デフォルト値は move deltaX は、現在のカーソルの X 軸を基準としたドラッグされた要素の位置を指します。デフォルト値は null です。deltaY を指します。ドラッグへの現在のカーソルを基準とした要素の Y 軸位置。デフォルト値は null です。ハンドルは、ドラッグ可能な要素の処理の開始を指します。デフォルト値は null です。 disabled はブール値です。true に設定すると、ドラッグが停止します。デフォルト値は false です。 edge ドラッグ可能な要素を開始できるドラッグ幅を指します。デフォルト値は 0 です。 axis を指します。ドラッグ可能な要素の定義に移動する軸。使用可能な値は「v」または「h」です。null に設定すると、「v」および「h」の方向に移動します。

属性名	意味
# #proxy







	# ケース分析: 3 つの div 要素のドラッグと配置を有効にする外部参照用の必須プラグイン <link rel="stylesheet" type="text/css" href="D:\jquery-easyui-1.6.10\themes\default\easyui.css"> <link rel="stylesheet" type="text/css" href="D:\jquery-easyui-1.6.10\themes\icon.css"> <script src="D:\jquery-easyui-1.6.10\jquery.min.js"></script> <script src="D:\jquery-easyui-1.6.10\jquery.easyui.min.js"></script> ログイン後にコピー HTML とCSS コード <style> div{ width:100px; height: 100px; margin-bottom:5px; text-align: center; line-height: 100px; } #box1{background: pink;} #box2{background: skyblue;} #box3{background: yellow;} </style> </head> <body> <div id="box1">box1</div> <div id="box2">box2</div> <div id="box3">box3</div> ログイン後にコピーレンダリング: box1 要素をドラッグ可能として設定 $('#box1').draggable(); ログイン後にコピーレンダリング: box2 の場合、元の要素のプロキシのクローン値を作成して、ドラッグできるようにします。 $('#box2').draggable({ proxy:'clone' }); ログイン後にコピーレンダリング: 3 番目のボックスでは、v 軸上でのみドラッグされるように要素を設定します。 $("#box3").draggable({ axis: 'v' }) ログイン後にコピーレンダリング: 要約: 上記は全体です。この記事の内容が皆さんの学習に役立つことを願っています。