Запретить перетаскивание предметов ниже отмененного - PullRequest
Новая
       8

Запретить перетаскивание предметов ниже отмененного

0 голосов
/ 28 сентября 2018

Я использую jquery Сортируемый , который предоставляет функциональность перетаскивания для элементов.Но я хочу ограничить некоторые элементы внизу и не хочу перетаскивать их куда-нибудь.Итак, я искал документацию по API и нашел это решение , которое прекрасно.но все же я сталкиваюсь с одной проблемой.что следующим образом:

Fiddle Link 

$(function() {
        $( ".sortable" ).sortable();
        $( ".sortable" ).disableSelection();
    $('.sortable').sortable({ cancel: '.note' });
    });
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet"/>

<ul class="sortable">

            <li id="item_3">Item 3</li>
            <li id="item_4">Item 4</li>
            <li id="item_5">Item 5</li>

            <p class="note">This is a note only</p> 
   </ul>

Если вы запускаете jsfiddle, по функциональности мы не можем перетаскивать строку «только для заметок».но мы можем перемещать другие предметы вверх и вниз по этой фиксированной линии.

Итак, мой вопрос Как я могу запретить фиксированным элементам оставаться внизу?Я не хочу, чтобы какие-либо элементы перетаскивали ниже фиксированного .?

1 Ответ

0 голосов
/ 28 сентября 2018

Вызов Sortable во 2-й раз, когда вы переинициализируете его.Вы должны вызвать Sortable следующим образом: 

$(function() {
  $( ".sortable" ).sortable();
  $( ".sortable" ).disableSelection();
  $('.sortable').sortable("option", "cancel", '.note');
});

Одна проблема, отмена ожидает элемент, как "p", а не класс.

Предотвращает сортировку при запускена элементах , соответствующих селектору.

Другая проблема заключается в том, что <p> не должен быть частью <ul> для правильного синтаксиса HTML.Я бы предложил следующее: 

$(function() {
  $(".sortable").sortable({
    cancel: "p"
  });
  $(".sortable").disableSelection();
});
.sortable {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 60%;
}

.sortable li,
.sortable p {
  margin: 0 3px 3px 3px;
  padding: 0.4em;
  padding-left: 1.5em;
  font-size: 1.4em;
  height: 18px;
}

.sortable li span {
  position: absolute;
  margin-left: -1.3em;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.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>
<ul class="sortable">
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li>
</ul>
<div class="sortable">
  <p class="ui-state-default note">This is a Note</p>
</div>

Это позволит заметке выглядеть как часть списка, но не будет сортироваться любым способом.

Обновление 

$(function() {
  $(".sortable").sortable({
    items: "li:not(.note)"
  });
  $(".sortable").disableSelection();
});
.sortable {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 60%;
}

.sortable li,
.sortable p {
  margin: 0 3px 3px 3px;
  padding: 0.4em;
  padding-left: 1.5em;
  font-size: 1.4em;
  height: 18px;
}

.sortable li span {
  position: absolute;
  margin-left: -1.3em;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.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>
<ul class="sortable">
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li>
  <li class="ui-state-default note">This is a Note</li>
</ul>
...