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