ドラッグ位置プレビューを実装するネイティブJS
|
この記事では、要素をドラッグするときにプレビューを追加する小さなデモを紹介します。効果は次のとおりです。
以下はコード実装です。どなたでもコピー、貼り付け、コメントしていただけます。
<!DOCTYPE html>
<html>
<ヘッド>
<meta http-equiv="コンテンツタイプ" コンテンツ="text/html; charset=utf-8" />
<title>ドラッグ位置プレビューを実装するネイティブ JS</title>
<スタイル>
。箱 {
位置: 絶対;
境界線: 1px 破線の黒;
}
#div1 {
幅: 100ピクセル;
高さ: 100px;
背景: 黄色;
位置: 絶対;
}
</スタイル>
<スクリプト>
window.onload = 関数（）{
var oDiv = document.getElementById('div1');
oDiv.onmousedown = 関数 (ev) {
var oEvent = ev || イベント;
var disX = oEvent.clientX - oDiv.offsetLeft;
var disY = oEvent.clientY - oDiv.offsetTop;
//点線の枠を持つdivを作成する
var oNewDiv = document.createElement('div');
oNewDiv.className = 'ボックス';
// 元の div サイズと一致するように境界線のサイズを減算します oNewDiv.style.width = oDiv.offsetWidth - 2 + 'px';
oNewDiv.style.height = oDiv.offsetHeight - 2 + 'px';
oNewDiv.style.left = oDiv.offsetLeft + 'px';
oNewDiv.style.top = oDiv.offsetTop + 'px';
document.body.appendChild(oNewDiv);
document.onmousemove = 関数 (ev) {
var oEvent = ev || イベント;
oNewDiv.style.left = oEvent.clientX - disX + 'px';
oNewDiv.style.top = oEvent.clientY - disY + 'px';
};
document.onmouseup = 関数（）{
ドキュメント.onmousemove = null;
ドキュメント.onmouseup = null;
oDiv.style.left = oNewDiv.style.left;
oDiv.style.top = oNewDiv.style.top;
//点線のボックスを削除します document.body.removeChild(oNewDiv);
};
};
};
</スクリプト>
</head>
<本文>
<div id="div1"></div>
</本文>
</html>以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: docker view container log コマンドの実装
>>: HTML テーブルタグチュートリアル (19): 行タグ
推薦する
MySQLの文字セットと検証ルールの詳細な説明
1いくつかの一般的な文字セットMySQL で最も一般的な文字セットには、ASCII 文字セット、ラテ...
JavaScript における一般的な配列操作
目次1. 連結() 2. 結合() 3. プッシュ() 5. シフト() 6. シフト解除() 7....
nginx+php実行リクエストの動作原理の詳細な説明
PHPの仕組みまず、よく耳にするcgi、php-cgi、fastcgi、php-fpmの関係を理解し...
Dockerイメージのローカル移行の実装
最近 Docker を勉強しているのですが、よく問題に遭遇します。Docker イメージをダウンロー...
Linux におけるシステム入出力管理の詳細な説明
システムの入力と出力の管理1. システムの入力と出力を理解するLinuxシステムでは、1は正しい出力...
Vue + OpenLayers クイックスタートチュートリアル
Openlayers は、WebGIS クライアント向けのモジュール式で高性能かつ機能豊富な Jav...
MySQL 8.0.15 バージョンのインストールチュートリアル Navicat.list への接続
落とし穴1. ネット上の多くのチュートリアルでは環境変数を設定するファイル名はmy.iniと書いてあ...
Dockerはrabbitmqのサンプルコードをインストールして実行します
イメージをプルします: [mall@VM_0_7_centos ~]$ sudo docker pu...
スタイルを書く際の背景色宣言の重要性
タイトルの通り、ページを修正すると以下のような状況が発生する可能性があります。現在、古いページを改修...
初心者向けの一般的な Linux システムコマンドの完全なリスト
Linux コマンドの学習は、ほとんどの初心者にとって最大の障害です。今日は、Linux システムで...
vue data が関数である理由をご存知ですか?
公式サイトの説明: コンポーネントを定義する場合、コンポーネントは複数のインスタンスを作成するために...
マーキー要素は、スクロールするフォントや画像などの効果を実装します。
マーキー要素を使用すると、単純なフォント（画像など）のスライドやその他の効果を実現できます。コードを...
Centos7 に yum を使用して MySQL をインストールし、リモート接続を実現する方法
Centos7はyumを使用してMySQLをインストールし、リモート接続を実現する方法です。MySQ...
MySQL 8.0.21 のインストールと設定方法のグラフィックチュートリアル
MySQL 8.0.21のインストールと設定方法を記録してみんなで共有します。 1. ダウンロード1...
MySQL は information_schema オブジェクトの付与をバイパスし、ERROR 1044 (4200) エラーを報告します
この質問は、MySQL の権限に関する WeChat グループのネットユーザー間の議論です。次のよう...