Can JQuery sortable be used to drag & drop on selection?

YChan
May 11, 2023
282 views
0 votes
2 Answers

I have three selections and need to remove item between these boxes. I use selections rather than ul tag because the value of the option is needed for saving the record. I reference the Sortableand modified it. However it doesn’t work. It is no respond during dragging and dropping. Could someone please assist me with identifying what might be wrong with my script? I would greatly appreciate any help.

There is my script:

<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>

Tags: jquery jquery-ui

Answers

You can use "ul" with the sortable library, and add an attribute to the "li" element to save the record.
This is an example :

$(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>

Consider the following.

$(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>

The SELECT element is a bad target for Drag and Drop activities in a User Interface. Since it has a built in click feature, this bubbles up over the click that Sortable is looking for and is unable to capture it.

The work around is to wrap it with a DIV and use that as your Handle or Target.

Also, Sortable will not know that it’s looking for SELECT out of the box, you must tell it using the items option.

Please signup or login to give your own answer.

Click here to cancel reply.