使用 sortable 拖放选择

Question

我有三个选择，需要删除这些框之间的项目。我使用 selections 而不是 ul 标签，因为保存记录需要选项的值。我参考了Sortable并修改了它。但是它不起作用。拖放过程中无响应。有人可以帮我确定我的脚本可能有什么问题吗？我将不胜感激任何帮助。

这是我的剧本：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>  
<script type="text/javascript">
    $(document).ready(function() {
        // Enable drag-and-drop functionality between select boxes
        $('#lstBox1, #lstBox2, #lstBox3').sortable({
            connectWith: '.column select'
        });

        // Sort options alphabetically
        $('select').each(function() {
            var options = $(this).find('option');
            options.sort(function(a, b) {
                if (a.text > b.text) return 1;
                else if (a.text < b.text) return -1;
                else return 0;
            });
            $(this).html(options);
        });
    });
</script>

html:

<div id='divBoxes' style='width: 60%;'>
        <div id='divFirst' class="column">
            <select multiple id='lstBox1'>
                <option value="1">Popcorn</option>
                <option value="2">Candy</option>
                <option value="3">Chip</option>
            </select>
        </div>
        <div id='divSecond' class="column">
            <select multiple id='lstBox2'>
                <option value="6">Beef</option>
                <option value="4">Pork</option>
                <option value="5">Lamb</option>
            </select>
        </div>
        <div id='divThird' class="column">
            <select multiple id='lstBox3'>
                <option value="1">Water</option>
                <option value="2">Sprint</option>
                <option value="3">Orange</option>
            </select>
        </div>
    </div>

Answer 1

可以在sortable库中使用“ul”，给“li”元素添加一个属性来保存记录。 这是一个例子：

$(document).ready(function() {
    // Enable drag-and-drop functionality between select boxes
    $('#lstBox1, #lstBox2, #lstBox3').sortable({
        connectWith: '.column ul'
    });

    // Sort options alphabetically
    $('ul').each(function() {
        var options = $(this).find('li');
        options.sort(function(a, b) {
            if ($(a).text() > $(b).text()) return 1;
            else if ($(a).text() < $(b).text()) return -1;
            else return 0;
        });
        $(this).html(options);
    });
});

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id='divBoxes' style='width: 60%;'>
    <div id='divFirst' class="column">
        <ul multiple id='lstBox1'>
            <li data-val="1">Popcorn</li>
            <li data-val="2">Candy</li>
            <li data-val="3">Chip</li>
        </ul>
    </div>
    <div id='divSecond' class="column">
        <ul multiple id='lstBox2'>
            <li data-val="6">Beef</li>
            <li data-val="4">Pork</li>
            <li data-val="5">Lamb</li>
        </ul>
    </div>
    <div id='divThird' class="column">
        <ul multiple id='lstBox3'>
            <li data-val="1">Water</li>
            <li data-val="2">Sprint</li>
            <li data-val="3">Orange</li>
        </ul>
    </div>
</div>

Answer 2

考虑以下内容。

$(function() {

  function mySort(a, b) {
    var vA = $(a).text().trim(),
      vB = $(b).text().trim(),
      v = 0;
    if (vA > vB) {
      v = 1;
    } else if (vA < vB) {
      v = -1;
    }
    return v;
  }

  // Enable drag-and-drop functionality between select boxes
  $('.column').sortable({
    connectWith: '.column',
    items: "> div.s-wrap"
  });

  // Sort options alphabetically
  $('select').each(function() {
    $(this).html($("option", this).sort(mySort));
  });
});

div.divBoxes {
  width: 120px;
}

div.s-wrap {
  padding: 1px 7px 1px 1px;
  background: #222;
  width: 112px;
  margin: 1px;
}

div.s-wrap>select {
  width: 100%;
}

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id='divBoxes'>
  <div id='divFirst' class="column">
    <div class="s-wrap">
      <select multiple id='lstBox1'>
        <option value="1">Popcorn</option>
        <option value="2">Candy</option>
        <option value="3">Chip</option>
      </select>
    </div>
  </div>
  <div id='divSecond' class="column">
    <div class="s-wrap">
      <select multiple id='lstBox2'>
        <option value="6">Beef</option>
        <option value="4">Pork</option>
        <option value="5">Lamb</option>
      </select>
    </div>
  </div>
  <div id='divThird' class="column">
    <div class="s-wrap">
      <select multiple id='lstBox3'>
        <option value="1">Water</option>
        <option value="2">Sprint</option>
        <option value="3">Orange</option>
      </select>
    </div>
  </div>
</div>

SELECT 元素是用户界面中拖放活动的不良目标。由于它具有内置的点击功能，因此会在 Sortable 正在寻找但无法捕获的点击上冒泡。

解决方法是用 DIV 包装它并将其用作您的句柄或目标。

此外，Sortable 不知道它正在寻找开箱即用的 SELECT，您必须使用

items

选项告诉它。