0

現在、これは私が持っているものです

ここに画像の説明を入力

現時点では、要素をドラッグ アンド ドロップできます (現時点では、指定された領域にドロップされた場合にキャプチャするリスナーはありません)。

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>

Jクエリ

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

理想的には、これが欲しいです。

ここに画像の説明を入力

A）ユーザーがXをクリックしてリストから削除できるように、要素の最後にXを配置する方法について、誰かが私を正しい方向に向けることができますか.

B) または、不要な要素をドラッグしてリスト領域の外にドロップして削除する方法を教えてください。

4

1 に答える 1

0

自分でスタイリングする必要があります。しかし、ここに例があります：

# 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();
});
于 2013-01-16T20:16:06.963 に答える