jQuery UI sortable how to prevent moving to certain columns?

N

Never Ever2020-05-02 09:46:03

JavaScript

Never Ever, 2020-05-02 09:46:03

How to prevent list item from moving to certain columns, but with the ability to move it to other columns?

How can I prevent the element from column 2 and 3 from being moved to 1 , but leave the option between 2 and 3 to move them permanently.

Example

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Sortable - Connect lists</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">
  <style>
  #sortable1, #sortable2, #sortable3 {
    border: 1px solid #eee;
    width: 142px;
    min-height: 20px;
    list-style-type: none;
    margin: 0;
    padding: 5px 0 0 0;
    float: left;
    margin-right: 10px;
  }
  #sortable1 li, #sortable2 li,#sortable3 li {
    margin: 0 5px 5px 5px;
    padding: 5px;
    font-size: 1.2em;
    width: 120px;
  }
  </style>
  <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>
  <script>
  $( function() {
    $( "#sortable1, #sortable2,#sortable3" ).sortable({
      connectWith: ".connectedSortable"
    }).disableSelection();
  } );
  </script>
</head>
<body>
 
<ul id="sortable1" class="connectedSortable">
  <li>Список 1</li>
  <li class="ui-state-default">Item 1</li>
  <li class="ui-state-default">Item 2</li>
  <li class="ui-state-default">Item 3</li>
  <li class="ui-state-default">Item 4</li>
  <li class="ui-state-default">Item 5</li>
</ul>
 
<ul id="sortable2" class="connectedSortable">
<li>Список 2</li>
   <li class="ui-state-default">Item 1</li>
  <li class="ui-state-default">Item 2</li>
  <li class="ui-state-default">Item 3</li>
  <li class="ui-state-default">Item 4</li>
  <li class="ui-state-default">Item 5</li>
</ul>

<ul id="sortable3" class="connectedSortable">
<li>Список 3</li>
  <li class="ui-state-default">Item 1</li>
  <li class="ui-state-default">Item 2</li>
  <li class="ui-state-default">Item 3</li>
  <li class="ui-state-default">Item 4</li>
  <li class="ui-state-default">Item 5</li>
</ul>

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

V

Valentyn, 2020-05-02
@Target1

I think it needs to be broken down here:

$( "#sortable1, #sortable2,#sortable3" ).sortable({
      connectWith: ".connectedSortable"
    }).disableSelection();

Into 2 parts:
1) separately 1 column (remove the connectedSortable class from UL)
2) columns 2, 3
You will get something like:

$( function() {
    $( "#sortable1" ).sortable().disableSelection();
    $( "#sortable2, #sortable3" ).sortable({
      connectWith: ".connectedSortable"
    }).disableSelection();
  } );