ドラッグ位置プレビューを実装するネイティブ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): 行タグ
推薦する
JDBC を使用して MySQL を操作するための簡単な分析では、Class.forName("com.mysql.jdbc.Driver") を追加する必要があります。
導入データベースに接続するためにJDBCを使用することに慣れている場合は、データベースに接続するため...
jQueryはシャトルボックス機能を実現する
この記事では、シャトルボックス機能を実現するためのjQueryの具体的なコードを参考までに紹介します...
React Native スキャフォールディングの基本的な使い方の詳細な説明
プロジェクトを構築する対応するパスでコマンドラインを実行します: react-native init...
Linux での JDK と Tomcat のアップロードと設定に関する詳細なチュートリアル
準備1. 仮想マシンを起動する2. gitツールルートアカウントでログインルートアカウントを使用して...
Vue で className として空の文字列を使用することはなぜ推奨されないのですか?
目次空の文字列 '' と null を比較するケース1: 空の文字列を使用する &#...
MySQL ストアド プロシージャのクエリ コマンドの概要
以下のように表示されます。 mysql.proc から名前を選択します (db='データベー...
クエリプロファイラを使用して MySQL ステートメントの実行時間を表示する方法
前回の記事では、MySQL ステートメントの実行時間をチェックする 2 つの方法を紹介しました。今日...
乱数、文字列、日付、検証コード、UUIDを生成するMySQLメソッド
目次乱数を生成する0から1までの乱数を生成する指定された範囲内で乱数を生成します6桁のモバイル認証コ...
MySQL でスロークエリを有効にする方法の例
序文スロー クエリ ログは、MySQL で非常に重要な機能です。MySQL のスロー クエリ ログ機...
VUEは登録とログインの効果を実現します
この記事の例では、登録とログインの効果を実現するためのVUEの具体的なコードを紹介します。具体的な内...
Linux の権限管理コマンド (chmod/chown/chgrp/unmask) の詳細な説明
目次chmod例権限に関する特別な注意分析するチョーンchgrp umask Linux オペレーテ...
MySQL 30軍事ルールの詳細な説明
1. 基本仕様（1）InnoDBストレージエンジンを使用する必要があります。解釈：トランザクション、...
JavaScript は単一のリンクリストプロセス分析を実装します
序文：複数の要素を格納するために、配列は最も一般的に使用されるデータ構造ですが、配列には多くの欠点も...
HTML シンボルからエンティティへのアルゴリズムのチャレンジ
チャレンジ：文字列内の文字 &、<、>、" (二重引用符)、および &...
Linux シェル環境での Zabbix API の使用
Linux シェル環境で直接呼び出すことができます。公式 Web サイトによると、Zabbix のデ...