发送 AJAX 函数列表项从第一个列表拖放到第二个列表答案

【问题标题】：Sending AJAX Function List Item Dragged and Dropped from First List to Second List发送 AJAX 函数列表项从第一个列表拖放到第二个列表
【发布时间】：2020-12-25 08:51:07
【问题描述】：

我有以下JS代码：

$("#list-one, #list-two").sortable({
   connectWith: '#list-two',
      start: function () {
         sender = $(this);
         recvok = false;
      },
      over: function () {
         recvok = ($(this).not(sender).length != 0);
      },
      stop: function () {
         if (!recvok)
            $(this).sortable('cancel');

         $.ajax({
            url: '/process-list-element',
            type: 'GET',
            data: {'list_element_name': $(this).find('h6').text()},
         });
      }
   }).disableSelection();

拖放工作正常，但在 AJAX 函数中，“this”关键字指的是整个列表，而不是被拖放的列表元素。我需要将拖放到函数 process-list-element 的列表元素的名称发送，而不是整个列表。供您参考，当拖放列表元素时，函数 process-list-element 会被适当地触发。有没有办法可以从“this”关键字访问列表元素？如果有帮助的话，该列表只是一个由 ul 和 li 标签组成的无序 HTML 列表。可以在下面找到 HTML 的 sn-p：

<ul id="list-one" class="connectedSortable">
   <li class="inner-pad">
      <h6>Blah blah blah</h6>
      <div class="content-div">
         <span>Blah blah blah</span>
         <p>Blah blah blah</p>
         <i>$32.95</i>
      </div>
   </li>
</ul>

任何帮助将不胜感激。谢谢。

【问题讨论】：

为什么不使用传递给“start”、“stop”和“over”事件的默认参数呢？试试这个，start( event, ui )。 ui.item 是您正在寻找的。另请阅读this
ui.item 是一个 JQuery 对象。如何从中提取值？
你能显示你的html吗？
我在上面展示了一个 HTML 的 sn-p。
使用 console.log(ui.item) 打印对象。您可以在浏览器的开发人员工具控制台中找到结果。阅读开发者工具以及如何使用它。它是专门调试代码的非常有用的工具。你能在这里显示console.log的结果吗？

标签： javascript html jquery ajax drag-and-drop

【解决方案1】：

您可以使用.find() 获取元素文本，即：<h6> 标签。这里，item 代表当前拖动的元素，因此您可以使用它访问其中的元素（子元素）。

演示代码：

$("#list-one, #list-two").sortable({
  connectWith: '#list-two',
  start: function() {
    sender = $(this);
    recvok = false;
  },
  over: function() {
    recvok = ($(this).not(sender).length != 0);
  },
  stop: function(event, ui) {
    var text = ui.item.find("h6").text() //get h6 text
    console.log(text)
    console.log(ui.item.find("i").text()) //get i text
    if (!recvok)
      $(this).sortable('cancel');
    $.ajax({
      url: '/process-list-element',
      type: 'GET',
      data: {
        'list_element_name': text //pass same
      },
    });
  }
}).disableSelection();

<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<ul id="list-one" class="connectedSortable">
  <li class="inner-pad">
    <h6>Blah blah blah</h6>
    <div class="content-div">
      <span>Blah blah blah</span>
      <p>Blah blah blah</p>
      <i>$32.95</i>
    </div>
  </li>
  <li class="inner-pad">
    <h6>Blah blah blah245</h6>
    <div class="content-div">
      <span>Blah blah blah</span>
      <p>Blah blah blah</p>
      <i>$32.9</i>
    </div>
  </li>
</ul>
<hr>
<ul id="list-two" class="connectedSortable">
  <li class="inner-pad">
    <h6>Blah blah2554 blah</h6>
    <div class="content-div">
      <span>Blah blah blah</span>
      <p>Blah blah blah</p>
      <i>$95</i>
    </div>
  </li>
</ul>

【讨论】：