JQusey をカプセル化する UI プラグインとして、easyui は実際には非常に使いやすく、少なくとも私のようなクズな人間は多くの時間を節約できます。
ドラッグ可能は 2 つの方法でロードできます:
1、次のようにクラスを通じてロードされます:
<div id="box" class="easyui-draggable"></div>
次のように JS 経由で読み込みます:
$('#box').draggable();
上記の 2 つの点は、「easyui-draggable」と draggable の両方が固定されており、easyui によって作成された関数を呼び出すことで jQuery の効果を実現していることに注意してください。
ドラッグ可能なプロパティ:
revert 値が true の場合、ドラッグが停止すると開始位置に戻り、どこでもドラッグできます。
元に戻す: ブール値、
軸 ドラッグの方向を制限します、水平 'h'?縦の「v」?これは、ドラッグ方向を
に設定すると、さらに興味深いものになります。縦書きの場合は、WeChatやWeiboのメッセージを更新するのと同じです。
軸: 文字列/'v'/'h',
プロキシ クローン作成とは、ドラッグするときにドラッグするオブジェクトを変更せずに、マウスでドラッグするオブジェクトをコピーすることを意味します。もちろん
他のものにすることも、関数をトリガーすることもできます。
プロキシ: null/文字列/関数、
他にも属性はたくさんありますが、特に興味深いものではないと思います。
cursor: move/String, //ドラッグ時のポインタのCSSスタイルを指定して美しくします
deltaX : null/数値、
deltaY: null/number, //ドラッグされた要素は、現在のカーソル位置の x、y に対応します。これは、ドラッグされた要素とカーソルの間の距離
です。
handle: null/selector //ドラッグを開始するハンドル Handle!ハンドルをドラッグするだけです。はい!
disabled : boolean // true に設定すると、現在バインドされている要素はドラッグできません
edge:number // コンテナ内でドラッグできるコンテナの幅 コンテナの上下左右から数えると、長方形の中に長方形が入ったような形になり、内側の要素はドラッグできるようになります。マウスは内側の長方形に置かれます
例:
$('#box').draggable({ revert : true, cursor: 'text', handle : '#pox', disabled : false, edge : 50, axis :'v', proxy : 'clone', deltaX: 10, deltaY : 10, proxy: function(source){ console.log('呵呵哒!'); } });
ドラッグ可能なイベント:
onBeforeDrag はドラッグする前にトリガーされ、false を返すとドラッグがキャンセルされます
onBeforeDrag : function (e){ alert('拖动之前触发'); return false; }
onStartDrag は
をドラッグするときにトリガーされますonStartDrag : function(e){ alert('拖动时触发'); }
onDrag はドラッグ プロセス中にトリガーされ、ドラッグが不可能な場合は false を返します
onDrag : function(e){ alert('拖动过程触发'); }
ドラッグが停止すると onDrag がトリガーされます
onStopDrag : function (e){ alert('在拖动停止时触发'); }
ドラッグ可能なメソッドのリスト
オプションは属性オブジェクトを返します
console.log($('#box').draggable('options'));
プロキシ プロキシ属性が設定されている場合は、ドラッグ プロキシ要素
を返します。console.log($('#box').draggable('proxy'));
ドラッグ可能
$('#box').draggable('enable');
無効にすると、ドラッグが禁止されます
$('#box').draggable('disable');
簡単な例を見てみましょう
<pre class="brush:java;">html> <meta charset="UTF-8"> <title>Basic Draggable - jQuery EasyUI Demo</title> <link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.6/themes/metro/easyui.css"> <link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.6/themes/icon.css"> <link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.6/demo/demo.css"> <script type="text/javascript" src="jquery-easyui-1.3.6/jquery.min.js"></script> <script type="text/javascript" src="jquery-easyui-1.3.6/jquery.easyui.min.js"></script> <h2 id="Basic-Draggable">Basic Draggable</h2> <p>Move the boxes below by clicking on it with mouse.</p> <div id="dd" class="easyui-draggable" data-options="handle:'#title'" style="width:100px;height:100px;"> <div id="title" style="background:#ccc;width:100px;height:100px;">容器里面的内容</div> </div> <script> $(function () { $("#title").draggable({ proxy: function (a) { var a = $('<div class="proxy_div">你拖我干啥</div>'); a.appendTo('body'); return a; }, cursor: 'pointer', edge: '6' }); }); </script>
上記は Easyui 1.2.5 Draggable のほぼすべてのプロパティ、イベント、メソッド、例です。何か間違っている場合は、コメントして議論し、一緒に教えてください。

JavaScript文字列置換法とFAQの詳細な説明 この記事では、javaScriptの文字列文字を置き換える2つの方法について説明します:内部JavaScriptコードとWebページの内部HTML。 JavaScriptコード内の文字列を交換します 最も直接的な方法は、置換()メソッドを使用することです。 str = str.replace( "find"、 "置換"); この方法は、最初の一致のみを置き換えます。すべての一致を置き換えるには、正規表現を使用して、グローバルフラグGを追加します。 str = str.replace(/fi

それで、あなたはここで、Ajaxと呼ばれるこのことについてすべてを学ぶ準備ができています。しかし、それは正確には何ですか? Ajaxという用語は、動的でインタラクティブなWebコンテンツを作成するために使用されるテクノロジーのゆるいグループ化を指します。 Ajaxという用語は、もともとJesse Jによって造られました

記事では、JavaScriptライブラリの作成、公開、および維持について説明し、計画、開発、テスト、ドキュメント、およびプロモーション戦略に焦点を当てています。

この記事では、ブラウザでJavaScriptのパフォーマンスを最適化するための戦略について説明し、実行時間の短縮、ページの負荷速度への影響を最小限に抑えることに焦点を当てています。

マトリックスの映画効果をあなたのページにもたらしましょう!これは、有名な映画「The Matrix」に基づいたクールなJQueryプラグインです。プラグインは、映画の古典的な緑色のキャラクター効果をシミュレートし、画像を選択するだけで、プラグインはそれを数値文字で満たされたマトリックススタイルの画像に変換します。来て、それを試してみてください、それはとても面白いです! それがどのように機能するか プラグインは画像をキャンバスにロードし、ピクセルと色の値を読み取ります。 data = ctx.getimagedata(x、y、settings.greasize、settings.greasize).data プラグインは、写真の長方形の領域を巧みに読み取り、jQueryを使用して各領域の平均色を計算します。次に、使用します

この記事では、ブラウザ開発者ツールを使用した効果的なJavaScriptデバッグについて説明し、ブレークポイントの設定、コンソールの使用、パフォーマンスの分析に焦点を当てています。

この記事では、jQueryライブラリを使用してシンプルな画像カルーセルを作成するように導きます。 jQuery上に構築されたBXSLiderライブラリを使用し、カルーセルをセットアップするために多くの構成オプションを提供します。 今日、絵のカルーセルはウェブサイトで必須の機能になっています - 1つの写真は千の言葉よりも優れています! 画像カルーセルを使用することを決定した後、次の質問はそれを作成する方法です。まず、高品質の高解像度の写真を収集する必要があります。 次に、HTMLとJavaScriptコードを使用して画像カルーセルを作成する必要があります。ウェブ上には、さまざまな方法でカルーセルを作成するのに役立つ多くのライブラリがあります。オープンソースBXSLiderライブラリを使用します。 BXSLiderライブラリはレスポンシブデザインをサポートしているため、このライブラリで構築されたカルーセルは任意のものに適合させることができます

データセットは、APIモデルとさまざまなビジネスプロセスの構築に非常に不可欠です。これが、CSVのインポートとエクスポートが頻繁に必要な機能である理由です。このチュートリアルでは、Angular内でCSVファイルをダウンロードおよびインポートする方法を学びます


ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

AI Hentai Generator
AIヘンタイを無料で生成します。

人気の記事

ホットツール

SublimeText3 英語版
推奨: Win バージョン、コードプロンプトをサポート!

SecLists
SecLists は、セキュリティ テスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティ テスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティ テストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジング ペイロード、機密データ パターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテスト マシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。

Dreamweaver Mac版
ビジュアル Web 開発ツール

SAP NetWeaver Server Adapter for Eclipse
Eclipse を SAP NetWeaver アプリケーション サーバーと統合します。

SublimeText3 Linux 新バージョン
SublimeText3 Linux 最新バージョン

ホットトピック



