小编wes*_*Kid的帖子

我正在尝试使用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: …

我正在尝试根据系统上是否存在与数据库条目对应并用 id 作为其名称的一部分标识的图像来加载两个不同的缩略图图像之一。

为了清楚起见，稍微简化一下，如果名为 {id}-thumb.png 的特定图像存在，那么我想使用 jQuery 将其名称加载到 HTML 的 src 中。如果图像不存在，我想加载一个名为thumbnail.png 的通用缩略图图像。

这是我到目前为止：

var image_path = id + "-thumb.png";
$.ajax({
    url: image_path,
    type: "HEAD",
    error: function() {
        $("li#" + id + " .thumbnail").attr("src","thumbnail.png");
    },
    success: function() {
        $("li#" + id + " .thumbnail").attr("src",id + "-thumb.png");
    }
});

然后我通过建立一个字符串变量 list_item 来生成要插入的新 HTML

var list_item = "<li id='" + id + "'>";
list_item += "<figure>";
list_item += "<img class='thumbnail' src=''></a>";
list_item += "</figure>";

最后，我将这个新的 list_item 变量添加到现有的 ul 中：

$(".list ul").prepend(list_item);

但是我没有得到图像并且查看生成的 …