ドラッグ位置プレビューを実装するネイティブ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): 行タグ
推薦する
イベントバブリング、イベントキャプチャ、イベント委任に基づく詳細な説明
イベントバブリング、イベントキャプチャ、イベント委任JavaScript では、イベント委譲は非常に...
MySQL で絵文字表現を挿入できない理由と解決策
失敗のシナリオMySQL データベースに絵文字表現を挿入するために JDBC を呼び出すと、例外ja...
ウェブデザインを改善するための 8 つの CSS ツールを共有する
ウェブサイトのデザインを編集または変更する必要がある場合、CSS が重要な役割を果たします。 CSS...
mysql 5.6.23 winx64.zip インストール詳細チュートリアル
WindowsにMySQLの圧縮バージョンをインストールする方法の詳細については、以下を参照してくだ...
mysql-8.0.15-winx64はインストールにzipパッケージを使用し、起動後すぐにサービスがシャットダウンされます。
この例で使用されているMySQLのバージョンはmysql-8.0.15-winx64です。 1. z...
keepalived+nginx の高可用性を実装する方法の例
1. keepalived の紹介Keepalived は、もともと LVS クラスタ システム内の...
MySQL Order By 複数フィールドのソートルールのコード例
事前に言っておく気まぐれですが、MySQL の order by sorting にどのようなルール...
jQueryはシンプルなボタンの色の変更を実装します
HTML と CSS で、ボタンの色を設定したいとします。 目的の効果は得られますが、プロセスはかな...
ウェブページ制作時のコードコメントの書き方
<br />私の仕事で使用しているアノテーションの書き方の基準をまとめました。技術的な内...
Nginx http ヘルスチェック構成プロセス分析
パッシブチェックパッシブ ヘルス チェックでは、NGINX と NGINX Plus はイベントの発...
Linux sar コマンドの使用方法とコード例の分析
1. CPU使用率sar -p (一日中表示) sar -u 1 10 (1: 1秒ごと、10: 1...
Dockerコンテナの原理の分析
目次01 コンテナの本質とは何か？ 02 Cgroupテクノロジーと名前空間テクノロジーの概要03 ...
XHTML CSS ウェブサイトデザインの利点と問題点
XHTML は現在国際的に推奨されている標準的な Web サイト設計言語です。Webjx.com も...
int(3)とint(10)の値の範囲はmysqlで同じですか？
目次質問：答え：現実：知識ポイント結論は：要約する質問： MySQLフィールド、unsigned i...
MySQL 数値型オーバーフローの処理方法
さて、質問させてください。MySQL で列を int(0) に設定すると何が起こりますか?この問題を...