将AJAX函数列表项从第一个列表拖放到第二个列表

Question

我有以下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函数中；这个"；关键字指的是整个列表，而不是拖放的列表元素。我需要将拖放的列表元素的名称发送到函数进程列表元素，而不是整个列表。就您的信息而言，当拖放列表元素时，会适当地触发函数流程列表元素。有没有一种方法我可以从"；这个"；关键字？如果有帮助的话，该列表只是一个由ul和li标记组成的无序HTML列表。HTML的一个片段可以在下面找到：

<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>

如有任何帮助，我们将不胜感激。谢谢

Answer 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>