ドラッグ位置プレビューを実装するネイティブ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): 行タグ
推薦する
ElementuiはデータをxlsxとExcelテーブルにエクスポートします
最近、Vue プロジェクトについて知り、ElementUI でデータを xlsx および Excel...
5分でDockerを使ってRedisのクラスターモードとセンチネルモードを構築する方法を教えます
目次1. 準備Redisイメージを取得する2. Redis Sentinel マスタースレーブモード...
Element UI をインストールして vue3.0 でベクター グラフィックスを使用する方法
ここでは、v3 のインストールと使用にのみ焦点を当てます。v2 について学びたい場合は、公式 Web...
vue3.0 プロジェクトを素早く構築するための手順を完了する
目次1. 3.0をより適切にサポートするには、vue/cliのバージョンが4.5.0以上であることを...
イメージのパッケージ化とワンクリック展開を実現するためにDockerを組み合わせたアイデア
1. サーバーにDockerをインストールする yumでdockerをインストール設定ファイルを変更...
Nginx ロケーション設定（ロケーションのマッチング順序）の詳細な説明
ロケーションは「位置指定」を意味し、主にさまざまな位置指定のための URI に基づいています。これは...
MySQL Installer Community 5.7.16 インストール詳細チュートリアル
この記事では、MySQL インストールの詳細なチュートリアルを記録し、全員と共有します。 1. バー...
WeChat アプレット wxss で外部 CSS ファイルとアイコンフォントを参照する方法
原因外部ファイルをミニプログラムにインポートする方法は次のとおりです: @import "...
Centos ベースイメージの作成方法
序文現在、私の会社で使用しているオペレーティングシステムはすべて CentOS7.4 で、アプリケー...
nginx サーバーでの 502 不正なゲートウェイ エラーの原因のトラブルシューティング
パブリックアカウントのファンデータを同期してバッチプッシュするときに、サーバーがエラー502を報告し...
MySQL 8.0.14 のインストールと設定方法のグラフィックチュートリアル
この記事では、MySQL 8.0.14のインストールと設定のプロセスを記録しています。具体的な内容は...
JS配列ループ方式と効率分析の比較
配列メソッドJavaScript には多くの配列メソッドが用意されています。次の図は、ほとんどの配列...
数千万データを持つMySQLテーブルを最適化する実践記録
序文まずここで説明させてください。インターネット上では、Alibaba では 500 万のデータを異...
Ubuntu システムにおける Mysql ERROR 1045 (28000): ユーザー root@localhost へのアクセスが拒否される問題の解決方法
最初の方法: skip-grant-tables: 非常に便利なmysql起動パラメータ非常に便利な...
Nginx+Apache の動的および静的分離の導入の詳細な例
Nginx の動的および静的分離の概要Nginx は静的処理能力が強力ですが、動的処理能力が不十分で...