生成AIで作成しました。マウスで移動可能な要素を作成します。
作成物
output | output2 |
output = 入力値x2
作業
生成AI:BingChat
入力したプロンプト(厳密ではないので再現性は不明です。一行づつ対話しならがら行っています)
マウス移動できる要素をコーディングしてください マウスオーバーした場合にポインタ表示が変化するように追加してください。 十字ではなく指差しマークにできますか パネル内の要素を簡単な表にしてください。 移動中に変化しないようにしてください。 表の1行1列目の部分に入力欄を設置してください。 1行1列目の値を2倍した値を2行1列目に出力してください。
出力
html
要素タグの設定
<div id="test_table">
<table>
<tr><td><input type="text" name="input"></td><td><input type="text" name="input2"></td></tr>
<tr><td>output</td><td>output2</td></tr>
</table>
</div>
javascript
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(function () {
//ドラッグフラグ
var drag_flg = false;
//マウスダウンの位置
var pos1;
var pos2;
//要素位置の修正値
var posX1;
var posY1;
//要素内でマウスボタンが押された場合
$("#test_table <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(function () {
//ドラッグフラグ
var drag_flg = false;
//マウスダウンの位置
var pos1;
var pos2;
//要素位置の修正値
var posX1;
var posY1;
//リサイズフラグ
var resize_flg = false;
//要素内でマウスボタンが押された場合
$("#test_table").mousedown (function (evt1) {
//ドラッグ判定(ドラッグしてない場合)
if (drag_flg == false) {
//要素の位置取得
pos1 = $("#test_table").position ();
//要素位置を取得して修正値を計算
posX1 = evt1.clientX - pos1.left;
posY1 = evt1.clientY - pos1.top;
//ドラッグ中にする
drag_flg = true;
//ドラッグ中の場合
} else if (drag_flg == true) {
//要素のドラッグを解除
drag_flg = false;
}
});
//リサイズ用の要素内でマウスボタンが押された場合
$("#resize").mousedown (function (evt2) {
//リサイズ判定(リサイズしてない場合)
if (resize_flg == false) {
//リサイズ中にする
resize_flg = true;
//リサイズ中の場合
} else if (resize_flg == true) {
//リサイズを解除
resize_flg = false;
}
//ドラッグフラグをfalseにする(ドラッグとリサイズが同時に起こらないようにする)
drag_flg = false;
});
//要素上でマウスボタンが離された場合
$("#test_table").mouseup (function () {
//要素のドラッグを解除
drag_flg = false;
//リサイズを解除
resize_flg = false;
});
//ドキュメント上で マウスポインタ が動いた場合
$(document).mousemove (function (evt3) {
//ドラッグ中の場合
if (drag_flg == true) {
//要素位置を CSS で設定
$("#test_table"). css ("left", (evt3.clientX - posX1));
$("#test_table"). css ("top", (evt3.clientY - posY1));
}
//リサイズ中の場合
if (resize_flg == true) {
//要素の幅と高さを CSS で設定
$("#test_table"). css ("width", (evt3.clientX - pos1.left));
$("#test_table"). css ("height", (evt3.clientY - pos1.top));
}
});
//入力欄の値が変わった場合
$("input[name='input']").change(function () {
//入力欄の値を取得する
var input_value = $(this).val();
//入力欄の値が数値かどうか判定する
if (!isNaN(input_value)) {
//入力欄の値を数値に変換する
input_value = Number(input_value);
//入力欄の値を2倍する
input_value = input_value * 2;
//2行1列目に出力する
$("td:eq(2)").text(input_value);
}
//入力欄の値が数値でない場合
else {
//エラーメッセージを出力する
$("td:eq(2)").text("数値を入力してください。");
}
});
//入力欄の値が変わった場合
$("input[name='input2']").change(function () {
//入力欄の値を取得する
var input_value2 = $(this).val();
//入力欄の値が数値かどうか判定する
if (!isNaN(input_value2)) {
//入力欄の値を数値に変換する
input_value2 = Number(input_value2);
//入力欄の値を2倍する
input_value2 = input_value2 * 2;
//2行1列目に出力する
$("td:eq(3)").text(input_value2);
}
//入力欄の値が数値でない場合
else {
//エラーメッセージを出力する
$("td:eq(3)").text("数値を入力してください。");
}
});
});
</script>
CSS
<style>
#test_table {
background-color:#808080; /* パネルの色を灰色にする 変えてます*/
color: #FFF;
text-align: center;
padding: 10px;
position: absolute;
cursor: default;
border-radius: 10px;
width: 300px; /* パネルの幅を300pxにする */
border: 1px solid #000; /* 表の枠線を黒にする */
}
#test_table:hover {
cursor: pointer;
}
body {
margin-left: 0px;
margin-top: 0px;
}
table {
border-collapse: collapse;
}
td {
border: 1px solid #FFF; /* 表の枠線を白にする */
padding: 10px;
width: 100px; /* 表の列幅を100pxにする */
}
#resize {
width: 10px;
height: 10px;
background-color: #FFF;
position: absolute;
right: 0px;
bottom: 0px;
cursor: se-resize;
border: 1px solid #000; /* 表の枠線を黒にする */
}
</style>
コメント