Selecting consecutive elements using jQuery selectable

Question

I am trying the Serialize sample in jQuery.

I notice one behavior that I can select unrelated elements using mouse and Ctrl key.

I only want to select consecutive elements and not all elements on mouse clicks.

This is what is happening currently, its taking Item 1, 2 and 6 as the selections.

I want to only select consecutive elements and not unrelated elements by mouse click and add a validation error that you can only add consecutive elements like in the following screenshot.

This is the code, I am working on, currently:

$(function() {

  $(`#selectable`).bind("mousedown", function(e) {
    e.metaKey = true;
  }).selectable({
    selected: function(event, ui) {
      //For toggling between select clicks
      if ($(ui.selected).hasClass('click-selected'))
        $(ui.selected).removeClass('ui-selected click-selected');
      else {
        $(ui.selected).addClass('click-selected');
        console.log(ui.selected.innerText);

        let selectedID = ui.selected.id;

        $("#select-result").append(ui.selected.innerText);
      }
    },
    unselected: function(event, ui) {
      $(ui.unselected).removeClass('ui-selected click-selected');
    }
  });
});

#feedback {
  font-size: 1.4em;
}

#selectable .ui-selecting {
  background: #FECA40;
}

#selectable .ui-selected {
  background: #F39814;
  color: white;
}

#selectable {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 60%;
}

#selectable li {
  margin: 3px;
  padding: 0.4em;
  font-size: 1.4em;
  height: 18px;
}

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Selectable - Serialize</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>

<body>

  <p id="feedback">
    <span>You've selected:</span> <span id="select-result">none</span>.
  </p>

  <ol id="selectable">
    <li class="ui-widget-content">Item 1</li>
    <li class="ui-widget-content">Item 2</li>
    <li class="ui-widget-content">Item 3</li>
    <li class="ui-widget-content">Item 4</li>
    <li class="ui-widget-content">Item 5</li>
    <li class="ui-widget-content">Item 6</li>
  </ol>


</body>

</html>

Here's the fiddle, which I am working on.

Mahdi Salah · Answer 1 · 2018-02-20T08:29:27.030

I think that there is 2 cases,

First case is when no item is selected on your list so you can select any element. Second case : when one or many items are selected so you have to be sure that the item to select is neighbor of the selected items.

$(function () {

    $(`#selectable`).bind("mousedown", function (e) {
        e.metaKey = true;
    }).selectable({
        selected: function (event, ui) {
            //For toggling between select clicks
            if ($(ui.selected).hasClass('click-selected'))
                $(ui.selected).removeClass('ui-selected click-selected');
            else {
                //case when no Item is selected on your list
                let noItemIsSelected = !$(".ui-widget-content").hasClass('click-selected');
                //Case when on of neighbor's Item selected
                let oneOfNeighborsIsSelected = $(ui.selected).next().hasClass('click-selected') || $(ui.selected).prev().hasClass('click-selected');

                if (noItemIsSelected || oneOfNeighborsIsSelected) {


                    $(ui.selected).addClass('click-selected');
                    console.log(ui.selected.innerText);

                    let selectedID = ui.selected.id;

                    console.log(event);
                    $("#select-result").append(ui.selected.innerText);
                } else {
                    $(ui.selected).removeClass('ui-selected click-selected');
                }
            }
        },
        unselected: function (event, ui) {
            $(ui.unselected).removeClass('ui-selected click-selected');
        }
    });
});

You can see the updated version of your code here

Selecting consecutive elements using jQuery selectable

1 Answers1