jquery - 将 X 放在元素上以从中删除元素列表

Question

目前，这就是我所拥有的

目前，可以拖放元素（目前，如果它被拖放到指定区域，则没有监听器捕获）

HTML

<div class='left'>
<ul id="sortable">
    <li class="ui-state-highlight"></li>
    <li class="ui-state-highlight"></li>
    <li class="ui-state-highlight"></li>
</ul>
</div>

查询

<script>
    $(function() {
        $( "#sortable" ).sortable({
          items: "li:not(.ui-state-highlight)",
          placeholder: "ui-state-highlight"
        });
        $( "#sortable" ).disableSelection();
    });
  </script>

理想情况下，我想拥有这个。

A）有人可以指出我如何在元素末尾放置 X 的正确方向，以便用户可以单击 X 将其从列表中删除。

B) 或者，向我展示如何将不需要的元素拖放到列表区域之外以将其删除。

Answer 1

你必须自己做一些造型。但这里有一个例子：

# Example HTML
<div class='left'>
<ul id="sortable">
    <li class="ui-state-highlight" id="num1"><span></span></li>
    <li class="ui-state-highlight" id="num2"><span></span></li>
    <li class="ui-state-highlight" id="num3"><span></span></li>
</ul>
</div>

#Example CSS (you will have to do some styling yourself. You could for example use an image for the x or something)
#sortable .ui-state-highlight span {
    position: absolute;
    left: 2px;
    height: 10px;
    width: 10px;
    background-color: white;
}

# Untested, but this should be corret (tho, untested)
$('#sortable').on('click','.ui-state-highlight span',function () {
    $(this).parent().remove();
});