AI生成

B010 マウスで移動可能な要素


生成AIで作成しました。マウスで移動可能な要素を作成します。

作成物

outputoutput2

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>

コメント