我正在尝试使用 jQuery draggable/droppable 将列表项拖到 div 中,在此列表项将从可拖动的 ul 中删除,并且将进行 ajax 调用以删除 MySQL 数据库中的相应项。
的HTML:
<ul id="draggable">
<li id="list_1">List item 1</li> // Incrementing ID nos. from database
<li id="list_2">List item 2</li>
<li id="list_3">List item 3</li>
</ul>
<div id="droppable"></div>
到目前为止的jQuery:
$('#draggable li').draggable({
drag: function(event, ui) {
var id = $(this).attr('id').split("_");
id = id[1]; // OK so far - but how to pass this to droppable?
}
});
$('#droppable').droppable({
drop: function(event, ui) {
// How to get the id from draggable here so the correct list item is acted on?
$('#draggable li').remove();
$.ajax({
url: "delete.php",
type: "GET",
data: {
'id': id,
'user_id': user_id // user_id comes from PHP
}, // end ajax }
});
更新
非常感谢您的回复。我让它工作使用:
<script>
var user_id = "<?php print($user_id); ?>";
$(document).ready(function() {
$('#draggable li').draggable({
helper: 'clone'
});
$('#droppable').droppable({
accept: '#draggable li',
drop: function(ev, ui) {
var id = $(ui.draggable).attr('id').split("_");
var movie_id = id[1];
$('#draggable li#list_' + id).remove();
$.ajax({ // begin add ajax
url: "delete.php",
type: "GET",
data: { // begin add data
'id': id,
'user_id': user_id
} // end data
}); // end ajax
} // end drop function
}); // end droppable
}); // end ready
</script>
对我来说似乎没问题 - 你能看到的有什么问题吗?