javascript - 使用 ajax 传递输入名称

Question

我有这个脚本可以在我的数据库中存储项目位置

    var set = $('#set');
    var set_x = set.offset().left;
    var set_y = set.offset().top;   
    var id = <?php echo $id ?>;

  $( "#set div" ).draggable({ 
    stack: "#set div",
      stop: function(event, ui) {
          var pos_x = ui.offset.left - set_x;
          var pos_y = ui.offset.top - set_y;
          var need = ui.helper.data("need");

          console.log(pos_x);
          console.log(pos_y);
          console.log(need);

          //Do the ajax call to the server
          $.ajax({
              type: "POST",
              url: "posinsert.php",   
              data: { x: pos_x, y: pos_y, need_id: need ,id:id,item1:item}
            }).done(function( msg ) {
              alert( "Data Saved: " + msg );
            }); 
      }
  });

});

这是我的HTML

<div id="set">
  <div id="draggable" data-need="1">
    <p><img style="width:30%" src="./img/floor_plan_images/camera_top.png"</p>
    <input type="hidden" name="item1">
</div>

      <div id="draggable" data-need="2">
    <p><img style="width:30%" src="./img/floor_plan_images/camera_top.png"</p>
    <input type="hidden" name="item">
</div>
</div>
<div class="floor" id="droppable" ></div>

如何使用 AJAX 将输入名称传递到我的数据库？

我的项目位置已存储，但还需要项目名称。

如何在移动相同项目后更新位置？

Answer 1

使用 var name = $(ui.helper[0]).find('input').attr('name'); 获取如下所示的名称。

var set = $('#set');
    var set_x = set.offset().left;
    var set_y = set.offset().top;   
    var id = 10;


  $( "#set div" ).draggable({ 
    stack: "#set div",
    stop: function(event, ui) {
          var pos_x = ui.offset.left - set_x;
          var pos_y = ui.offset.top - set_y;
          var need = ui.helper.data("need");
          // Get name of the input element
          var name = $(ui.helper[0]).find('input').attr('name');

          console.log(pos_x);
          console.log(pos_y);
          console.log(need);
          console.log(name);

        }
});

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  
  
<div id="set">
  <div id="draggable" data-need="1">
    <p>
    <img style="width:30%" src="./img/floor_plan_images/camera_top.png">
    </p>
    <input type="hidden" name="item1"/>
</div>

     <div id="draggable" data-need="2">
    <p><img style="width:30%" src="./img/floor_plan_images/camera_top.png">
    </p>
    <input type="hidden" name="item">
</div>
</div>
<div class="floor" id="droppable" ></div>