ドラッグ位置プレビューを実装するネイティブ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): 行タグ
推薦する
SQL IDENTITY_INSERT ケーススタディ
一般的に、データ テーブル内の列を ID 列として設定すると、ID 列の表示値を手動で ID 列に挿...
Vue における属性とプロパティの具体的な使用法と違い
目次Vue.jsにおける属性とプロパティ値および関連する処理として属性とプロパティの概念属性とプロパ...
コードをセマンティックにする HTML のヒント
HTML のセマンティクスはありふれた問題のようです。Google で検索すると、セマンティクスに関...
ウェブページのアクセス速度に関する主な問題と解決策
<br />ウェブサイトのアクセス速度はウェブサイトのトラフィックに直接影響を及ぼし、ウ...
インターフェースなしで Centos7 に JDK と Tomcat をデプロイするチュートリアル
1. xshell6をインストールする2. サーバー接続を作成し、ユーザー名とパスワードを入力します...
前後の秒、分、時間、日数を取得するMySQLデータベース
現在の時刻を取得します: current_timestamp を選択します。出力: 2016-06-...
Linux dateコマンドの知識ポイントのまとめ
使用法: date [オプション]... [+フォーマット]または: date [-u|--utc|...
C# は MySQL コマンドラインのバックアップとリカバリを実装します
MySQL データベースをバックアップするためのツールは多数あります。過去 2 日間で、C# を使用...
Vueは小さな検索機能を実装する
この記事の例では、検索機能を実装するためのVueの具体的なコードを参考までに共有しています。具体的な...
きちんとした標準的なHTMLタグの書き方を学ぶ
優れた HTML コードは美しい Web サイトの基礎となります。私が CSS を教えるときは、まず...
画像を表示したり非表示にしたりするための JavaScript
JavaScriptは画像を表示したり非表示にしたりしますが、参考までに具体的な内容は次のとおりで...
MySQLのkillがスレッドをkillできない理由
目次背景問題の説明原因分析シミュレーションする総括する背景日常の使用において、MySQL で個別また...
Vueコンポーネントドキュメントを自動生成する方法を分析する
目次1. 現状2. コミュニティソリューション2.1 事業レビュー3. 技術的ソリューション3.1....
ulとliの基本的な使用法の分析
ナビゲーション、少量のデータテーブル、中央揃え<!DOCTYPE html PUBLIC &q...
JavaScriptオブジェクトをマージするさまざまな方法の詳細な説明
目次オブジェクトをマージするさまざまな方法（インターフェースを通じてデータを取得し、それをローカル ...