Различать отбрасывание и сортировку в jQuery UI sortable () - PullRequest
Новая
       1

Различать отбрасывание и сортировку в jQuery UI sortable ()

0 голосов
/ 13 февраля 2019

Я использую перетаскиваемый и сортируемый интерфейс jquery для функции перетаскивания.Я запускаю функцию, когда пользователь перетаскивает поле в область сброса.Вот мой код 

let initDrag = () => {
    $( ".draggable" ).draggable({
        connectToSortable: '.droppable',
        cursor: "crosshair",
        helper: "clone",
        opacity: 0.35,
        snap: true,
        refreshPositions: true
    })
}
let initSortable = () => {
    $( ".droppable" ).sortable({
        update: afterDrop
    });
}
let afterDrop = (event, ui) => {
    let fieldID = ui.item.attr("data-id");
    getFieldData(fieldID).then(fieldData => {
        fieldData[0].field.field_id = Date.now();
        formBuildingJSON.form_fields.push(fieldData[0]);
        console.log(formBuildingJSON);
    })
}

Я хочу запускать эту функцию afterDrop() только когда пользователь перетаскивает поле в выпадающую область.Но эта функция также запускается всякий раз, когда пользователь сортирует элемент.Итак, как я могу определить, было ли поле перетаскиваться или отсортировано.Я создаю массив, который хранит идентификатор всех перетаскиваемых элементов.Теперь, когда пользователь сортирует элементы, я хочу, чтобы этот массив был переупорядочен.Как я могу это сделать?

1 Ответ

0 голосов
/ 16 февраля 2019

Если я вас правильно понял, вы должны добавить stop: afterDrop к вашему .draggable().Метод afterDrop вызывается только при добавлении нового элемента.Вы можете изменить порядок элементов позже, но он не будет запускаться снова.

Проверьте следующий фрагмент. 

let afterDrop = (event, ui) => {
  console.log('afterDrop')
}

$(function () {
  $("#sortable").sortable({
    revert: true,
  });
  $("#draggable").draggable({
    connectToSortable: "#sortable",
    helper: "clone",
    revert: "invalid",
    stop: afterDrop
  });
  $("ul, li").disableSelection();
});
<!doctype html>
<html lang="en">

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>jQuery UI Draggable + Sortable</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>
		ul {
			list-style-type: none;
			margin: 0;
			padding: 0;
			margin-bottom: 10px;
		}

		li {
			margin: 5px;
			padding: 5px;
			width: 150px;
		}
	</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>
</head>

<body>

	<ul>
		<li id="draggable" class="ui-state-highlight">Drag me down</li>
	</ul>

	<ul id="sortable">
		<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>


</body>

</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...