如何在jQuery Sortable中删除指定图片？附现有拖拽排序代码

要给你的可拖拽图片网格添加删除指定图片的功能，按以下步骤修改即可：

1. 给图片项添加删除按钮 #

修改HTML中每个listitemClass容器，添加删除按钮，让用户可以点击删除对应图片：

<div id="im1" class="listitemClass">
  <button class="delete-btn">×</button>
  <img src="https://picsum.photos/id/237/200/300" alt="">
</div>
<!-- 其他图片项同理添加删除按钮 -->

2. 添加删除按钮的样式 #

在CSS中增加删除按钮的样式，让它悬浮在图片右上角，样式更直观：

/* 删除按钮样式 */
.delete-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(0,0,0,0.7);
  color: white;
  border: none;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  font-size: 16px;
  cursor: pointer;
  display: none;
}

.listitemClass {
  position: relative; /* 让按钮相对于容器定位 */
  border: 1px solid #006400;
  width: 25%;
}

.listitemClass:hover .delete-btn {
  display: block; /* 鼠标悬停时显示按钮 */
}

3. 添加删除功能的JS逻辑 #

在现有JS代码中添加删除按钮的点击事件，移除选中的图片项后，更新隐藏输入框中的ID列表：

$(function () {
  $("#imageListId").sortable({
    update: function (event, ui) {
      getIdsOfImages();
    },
  });

  // 删除按钮点击事件
  $(document).on('click', '.delete-btn', function() {
    $(this).closest('.listitemClass').remove(); // 移除当前图片项
    getIdsOfImages(); // 更新隐藏输入框的ID列表
  });
});

function getIdsOfImages() {
  var values = [];
  $(".listitemClass").each(function (index) {
    values.push($(this).attr("id").replace("im", ""));
  });
  $("#outputvalues").val(values);
}

修改后的完整代码 #

JavaScript #

$(function () {
  $("#imageListId").sortable({
    update: function (event, ui) {
      getIdsOfImages();
    },
  });

  // 删除按钮点击事件
  $(document).on('click', '.delete-btn', function() {
    $(this).closest('.listitemClass').remove();
    getIdsOfImages();
  });
});

function getIdsOfImages() {
  var values = [];
  $(".listitemClass").each(function (index) {
    values.push($(this).attr("id").replace("im", ""));
  });
  $("#outputvalues").val(values);
}

CSS #

/* image dimension */
.listitemClass img {
  height: 200px;
  width: 100%;
}
/* imagelistId styling */
#imageListId {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
#imageListId div {
  margin: 0 4px 4px 4px;
  padding: 0.4em;
  display: inline-block;
}
/* Output order styling */
#outputvalues {
  margin: 0 2px 2px 2px;
  padding: 0.4em;
  padding-left: 1.5em;
  width: 250px;
  border: 2px solid dark-green;
  background: gray;
}
.listitemClass {
  position: relative;
  border: 1px solid #006400;
  width: 25%;
}
.height {
  height: 10px;
}
/* 删除按钮样式 */
.delete-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(0,0,0,0.7);
  color: white;
  border: none;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  font-size: 16px;
  cursor: pointer;
  display: none;
}
.listitemClass:hover .delete-btn {
  display: block;
}

HTML #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<b>Drag and drop images to arrange</b>
<div class="height"></div><br>
<div id="imageListId" style="display:flex">
  <div id="im1" class="listitemClass">
    <button class="delete-btn">×</button>
    <img src="https://picsum.photos/id/237/200/300" alt="">
  </div>
  <div id="im2" class="listitemClass">
    <button class="delete-btn">×</button>
    <img src="https://picsum.photos/id/230/200/300" alt="">
  </div>
  <div id="im3" class="listitemClass">
    <button class="delete-btn">×</button>
    <img src="https://picsum.photos/id/235/200/300" alt="">
  </div>
  <div id="im4" class="listitemClass">
    <button class="delete-btn">×</button>
    <img src="https://picsum.photos/id/233/200/300" alt="">
  </div>
</div>
<form action="" method="post" enctype="multipart/form-data" style="margin-top:3%">
  <div id="outputDiv">
    <input id="outputvalues" type="hidden" value="" name="nname" />
    <input type="hidden" value="<?=$nname1?>" name="nname1" />
  </div>
  <button type="submit" name="editcategory" class="btn btn-primary">SAVE</button>
</form>

注：现有代码中引入的SortableJS未被使用（实际用的是jQuery UI的sortable），可以按需移除对应的script标签。

内容的提问来源于stack exchange，提问作者TBC