ドラッグ位置プレビューを実装するネイティブ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 シミュレーション計算機
この記事では、JavaScriptシミュレーション計算機の具体的なコードを参考までに紹介します。具体...
Ubuntu 上の MySQL における中国語文字化け問題の解決方法
問題を見つける最近 Django を学習しているのですが、MySQL データと組み合わせてデータを挿...
Linux での Apache サービスの展開と構成
目次1 Apacheの役割2 Apacheのインストール3. Apacheを有効にする4 Apach...
RocketMQ の Docker インストールとインストール中に発生した問題の解決策
目次rocketmqイメージを取得する名前rvを作成する単一のブローカーノードを作成するrocket...
Linux のスクリーンコマンドとその使い方
画面紹介Screen は、コマンドライン端末切り替え用に GNU プロジェクトによって開発されたフリ...
Docker 構成 Alibaba Cloud イメージアクセラレーション プル実装
今日はdockerを使ってイメージをpullしたのですが、速度が悪くて見れず最後まで待ち続けました。...
Reactを使用する際の7つの落とし穴のまとめ
目次1. コンポーネントの肥大化2. 状態を直接変更する3. プロパティは数値を渡す必要があるが文字...
JSを使用して簡単な計算機を実装する
JSを使用して、参考用の簡単な計算機を完成させます。具体的な内容は次のとおりです。要件: 入力値は数...
Linux の検索ツールの代替となるフレンドリーなツール
find コマンドは、指定されたディレクトリ内のファイルを検索するために使用されます。引数の前の文字...
CSS 要素を表示および非表示にする 9 つの方法
Web ページの制作では、要素の表示と非表示は非常に一般的な要件です。この記事では、要素を表示したり...
Navicat の MySQL へのリモート接続の実装手順の分析
序文皆さんはリモート サーバーで開発を行っており、MySQL の使用率はかなり高いはずです。コマンド...
JavaScript を使用して簡単なアルゴリズムを実行する方法
目次質問1件2つの方法3 実験結果と考察質問1件ご存知のとおり、 Pycharm 、 IDLE 、 ...
60件のページング事例と優れた実践例を推奨
<br />構造と階層により複雑さが軽減され、読みやすさが向上します。記事やサイトが整理...
MySQL Server 8.0.3 のインストールと設定方法のグラフィックチュートリアル
この文書はMySQL Server 8.0.3のインストールと設定方法を参考のために記録したものです...
HTML6 は折りたたみメニューとアコーディオンメニューのサンプルコードを実装します
ページの主要部分: <body> <ul id="メニュー"&...