jQuery - Как отключить div от перемещения вообще при сортируемом взаимодействии

Мне нужно остановить розовую часть 1, часть 2, часть 3 из сортировки сортировки, поскольку они являются заголовками для моих столбцов, и им нужно оставаться в это точное фиксированное положение. Как я могу это сделать ? Я пробовал использовать «Отмена», но я не знал, где его разместить.jQuery - Как отключить div от перемещения вообще при сортируемом взаимодействии

Также, если вы случайно найдете какие-либо плохо написанные материалы, пожалуйста, извините меня и сообщите мне, если у вас есть время. Я только начал, и я действительно плохо разбираюсь в этом.

<html> 
 

 
<head> 
 
    <script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script> 
 
    <script src="http://code.jquery.com/ui/1.12.1/jquery-ui.js" integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30=" crossorigin="anonymous"></script> 
 
    <style> 
 
    html, 
 
    body { 
 
     padding: 0; 
 
     margin: 0; 
 
     width: 100%; 
 
     height: 100%; 
 
     overflow: hidden; 
 
    } 
 
    #main-container { 
 
     background-color: green; 
 
     width: 100%; 
 
     height: 100%; 
 
     margin: auto; 
 
    } 
 
    .column-div { 
 
     width: 300px; 
 
     height: 100%; 
 
     float: left; 
 
     margin-right: 10px; 
 
    } 
 
    .column-name { 
 
     width: 100%; 
 
     height: 30px; 
 
     text-align: center; 
 
     background-color: pink; 
 
    } 
 
    .user { 
 
     width: 100%; 
 
     height: 50px; 
 
     background-color: gray; 
 
     border: 2px solid yellow; 
 
    } 
 
    #aqua { 
 
     background-color: aqua; 
 
    } 
 
    #red { 
 
     background-color: red; 
 
    } 
 
    #orange { 
 
     background-color: orange; 
 
    } 
 
    </style> 
 
</head> 
 

 
<body> 
 
    <div id="main-container"> 
 
    <div class="column-div" id="aqua"> 
 
     <div class="column-name"> 
 
     Part 1 
 
     </div> 
 

 
     <div class="user"> 
 

 
     </div> 
 

 
     <div class="user"> 
 

 
     </div> 
 

 
     <div class="user"> 
 

 
     </div> 
 

 
    </div> 
 

 
    <div class="column-div" id="red"> 
 
     <div class="column-name"> 
 
     Part 2 
 
     </div> 
 
    </div> 
 
    <div class="column-div" id="orange"> 
 
     <div class="column-name"> 
 
     Part 3 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
    <script type="text/javascript"> 
 
    $(function() { 
 
     $(".column-div").sortable({ 
 
     connectWith: ".column-div" 
 
     }).disableSelection(); 
 
    }); 
 
    </script> 
 

 
</body> 
 

 
</html>

источник

2017-02-09 Adi

вы пробовали состояние? – madalinivascu

Как и если/еще? Нет, у меня нет, и у меня действительно нет реальной идеи о том, как внедрить ее в мою текущую ситуацию. – Adi

есть элементы, которые позволяют установить селектор сортируемого здесь есть ссылка на документацию sortable items documetation

в вашем случае это будет нечто вроде

$(".column-div").sortable({ 
    connectWith: ".column-div", 
    items: '.user' 
    }).disableSelection();

источник

2017-02-09 08:14:49

Ничего себе, работал как шарм! Большое спасибо! – Adi

Используйте свойство cancel, чтобы отменить сортировку имени столбца

$(function() { 
 
    $(".column-div").sortable({ 
 
    connectWith: ".column-div", 
 
    cancel:".column-name" 
 
    
 
    }).disableSelection(); 
 
});

<html> 
 

 
<head> 
 
    <script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script> 
 
    <script src="http://code.jquery.com/ui/1.12.1/jquery-ui.js" integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30=" crossorigin="anonymous"></script> 
 
    <style> 
 
    html, 
 
    body { 
 
     padding: 0; 
 
     margin: 0; 
 
     width: 100%; 
 
     height: 100%; 
 
     overflow: hidden; 
 
    } 
 
    #main-container { 
 
     background-color: green; 
 
     width: 100%; 
 
     height: 100%; 
 
     margin: auto; 
 
    } 
 
    .column-div { 
 
     width: 300px; 
 
     height: 100%; 
 
     float: left; 
 
     margin-right: 10px; 
 
    } 
 
    .column-name { 
 
     width: 100%; 
 
     height: 30px; 
 
     text-align: center; 
 
     background-color: pink; 
 
    } 
 
    .user { 
 
     width: 100%; 
 
     height: 50px; 
 
     background-color: gray; 
 
     border: 2px solid yellow; 
 
    } 
 
    #aqua { 
 
     background-color: aqua; 
 
    } 
 
    #red { 
 
     background-color: red; 
 
    } 
 
    #orange { 
 
     background-color: orange; 
 
    } 
 
    </style> 
 
</head> 
 

 
<body> 
 
    <div id="main-container"> 
 
    <div class="column-div" id="aqua"> 
 
     <div class="column-name"> 
 
     Part 1 
 
     </div> 
 

 
     <div class="user"> 
 

 
     </div> 
 

 
     <div class="user"> 
 

 
     </div> 
 

 
     <div class="user"> 
 

 
     </div> 
 

 
    </div> 
 

 
    <div class="column-div" id="red"> 
 
     <div class="column-name"> 
 
     Part 2 
 
     </div> 
 
    </div> 
 
    <div class="column-div" id="orange"> 
 
     <div class="column-name"> 
 
     Part 3 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
</body> 
 

 
</html>

источник

2017-02-09 08:18:41 madalinivascu

Я использовал свойство items, чтобы применить сортировку только к тем элементам, которые я хотел. В моем случае отмена будет лучше для меня? – Adi

должно быть одинаковым – madalinivascu

Спасибо, что помогли мне – Adi

jQuery - Как отключить div от перемещения вообще при сортируемом взаимодействии

ответ

Смежные вопросы