将X放在元素上以从<ul>列表中删除元素</ul>

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>

JQUERY

<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();
});