jQuery UI sortable js - при нажатии кнопки перемещать элемент в конец списка - PullRequest
Новая
       10

jQuery UI sortable js - при нажатии кнопки перемещать элемент в конец списка

0 голосов
/ 03 декабря 2018

Я немного новичок в Sortable JS, я могу отобразить список элементов вместе с перетаскиванием и изменить положение элемента.Но я пытаюсь переместить элемент в последнюю позицию индекса, когда пользователь нажимает кнопку, которая есть для каждой строки в списке.Может кто-нибудь дать мне знать, как это можно сделать (или) любой пример того, как обновить порядок сортировки, поможет динамически.

Вот то, что я посмотрел ( пример ) для примера,но не смог получить то, что искал.

Заранее спасибо.

Ответы [ 2 ]

0 голосов
/ 03 декабря 2018

Я подозреваю, что есть несколько способов сделать это.Вы можете посмотреть на .detach() и .clone() тоже.Что бы вы ни делали, когда это будет сделано, вы должны вызвать .sortable("refresh"), чтобы обновился новый заказ.

refresh ()

Обновить сортируемые элементы,Запускает перезагрузку всех сортируемых предметов, вызывая распознавание новых предметов.

Пример 

$(function() {
  $("#sortable").sortable();
  $("#sortable button").button({
    classes: {
      "ui-button": "ui-sm-btn"
    },
    icon: "ui-icon-arrowthickstop-1-s",
    iconPosition: "top",
    showLabel: false
  }).on("click", function() {
    var item = $(this).parent().detach();
    $("#sortable").append(item).sortable("refresh");
  });
});
#sortable {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 60%;
}

#sortable li {
  margin: 0 3px 3px 3px;
  padding: 0.4em;
  padding-left: 1.5em;
  font-size: 1.4em;
  height: 18px;
  border: 1px solid;
}

#sortable li span {
  position: absolute;
  margin-left: -1.3em;
}

#sortable li button.ui-sm-btn {
  border-radius: 3px;
  float: right;
  width: 20px;
  height: 20px;
  line-height: 10px;
  padding: 0;
}

#sortable li button.ui-sm-btn span {
  margin: -8px 0 0 -8px;
}
<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 id="sortable">
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1<button>Send to bottom</button></li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2<button>Send to bottom</button></li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3<button>Send to bottom</button></li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4<button>Send to bottom</button></li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5<button>Send to bottom</button></li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6<button>Send to bottom</button></li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7<button>Send to bottom</button></li>
</ul>

Надеюсь, что поможет.

0 голосов
/ 03 декабря 2018

При нажатии на кнопку просто удалите элемент li и добавьте его в конец списка. 

$(function(){
    $("#sortable").sortable();
    $("button").on("click",function(){
        $("#sortable").append($(this).parent().remove());
    });
  });
#sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; border:1px solid;}
#sortable li span { position: absolute; margin-left: -1.3em; }
button { float:right;}
<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 id="sortable">
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1<button>Send to bottom</button></li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2<button>Send to bottom</button></li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3<button>Send to bottom</button></li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4<button>Send to bottom</button></li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5<button>Send to bottom</button></li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6<button>Send to bottom</button></li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7<button>Send to bottom</button></li>
</ul>
...