Как запустить Jquery Sortable по событию touchstart?

Question

Кирилл Белаш @kirillbelash93

Сертифицированный сыч

JavaScript

Как запустить Jquery Sortable по событию touchstart?

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>jQuery UI Sortable - Default functionality</title>
	<link rel="stylesheet" href="https://code.jquery.com/ui/1.14.0/themes/base/jquery-ui.css">
	<style>
		#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;
		}

		#sortable li span {
			position: absolute;
			margin-left: -1.3em;
		}
	</style>
	<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
	<script src="https://code.jquery.com/ui/1.14.0/jquery-ui.js"></script>
	<script src="jquery.ui.touch-punch.min.js"></script>
	<script>
		$(function () {
			$("#sortable").sortable({
				disabled: true
			});
		});

		$("#sortable").on("contextmenu", function (e) {
			e.preventDefault();
		})

		$("#sortable").on("touchstart", () => {
			this.sortable("option", { disabled: false });
		})
	</script>
</head>

<body>

	<ul id="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"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li>
	</ul>

</body>

</html>

Изначально сортировка заблокирована, по тачстарту она не запускается, как это сделать?

Вопрос задан 26 сент.
126 просмотров

Комментировать

Подписаться 1 Простой Комментировать

Пригласить эксперта

Ответы на вопрос 2

1 комментарий

6 комментариев

Кирилл Белаш @kirillbelash93 Автор вопроса

к сожалению та же история старт только после как отпустили палец и еще раз захватили

Написано 27 сент.

Данила @grantur5707

Кирилл Белаш,

$(function () {
			const $sortable = $("#sortable");

			$sortable.sortable({
				disabled: true
			});

			$sortable.on("contextmenu", function (e) {
				e.preventDefault();
			});

			$sortable.on("touchstart", function (event) {
				$(this).sortable("option", "disabled", false);

				const touch = event.originalEvent.touches[0];
				const targetElement = document.elementFromPoint(touch.clientX, touch.clientY);

				$(targetElement).trigger("mousedown");
			});
		});

Написано 27 сент.

Кирилл Белаш @kirillbelash93 Автор вопроса

Данила, аналогично

Написано 27 сент.
Кирилл Белаш @kirillbelash93 Автор вопроса

Данила, все дело в $(this).sortable("option", "disabled", false); как бы я не пробовал ее запускать именно в момент нажатия - ни в какую

Написано 27 сент.

Данила @grantur5707

Кирилл Белаш,

<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
<script src="https://code.jquery.com/ui/1.14.0/jquery-ui.js"></script>
<script src="jquery.ui.touch-punch.min.js"></script>
<script>
	$(function () {
		const $sortable = $("#sortable");

		$sortable.sortable({
			disabled: true,
			start: function(event, ui) {
				console.log('Сортировка началась');
			}
		});

		$sortable.on("contextmenu", function (e) {
			e.preventDefault();
		});

		$sortable.on("touchstart", function (event) {
			$(this).sortable("enable");

			const touch = event.originalEvent.touches[0];
			const targetElement = document.elementFromPoint(touch.clientX, touch.clientY);

			if ($(targetElement).closest("li").length) {
				const listItem = $(targetElement).closest("li");
				listItem.trigger("mousedown");
			}
		});
	});
</script>

Написано 27 сент.

Кирилл Белаш @kirillbelash93 Автор вопроса

Данила, нет, все та же ситуация, причем я проверял у блока даже удаляется класс ui-sortable-disable но старта нет

Написано 27 сент.

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы

JavaScript

Простой
Как можно сделать подобный слайдер?
- 1 подписчик
- 13 часов назад
- 83 просмотра
0

ответов
JavaScript

+2 ещё

Простой
Ошибка Uncaught ReferenceError: exports is not defined?
- 1 подписчик
- 15 часов назад
- 40 просмотров
1

ответ
JavaScript

Простой
Как убрать фоновое изображение через 5 сек?
- 1 подписчик
- 16 часов назад
- 63 просмотра
1

ответ
JavaScript

+1 ещё

Простой
Как сделать проверку на константы внутри enum линтом?
- 1 подписчик
- 18 часов назад
- 50 просмотров
0

ответов
JavaScript

+1 ещё

Простой
Почему не указывается путь к файлу js?
- 1 подписчик
- 23 часа назад
- 74 просмотра
1

ответ
JavaScript

+3 ещё

Простой
MIME тип CSS при попытке добавить stylesheet в head через скрипт. Как решить проблему?
- 1 подписчик
- вчера
- 92 просмотра
2

ответа
JavaScript

+3 ещё

Простой
Ошибка с Babel при сборке Webpack?
- 1 подписчик
- вчера
- 58 просмотров
1

ответ
JavaScript

+4 ещё

Простой
Почему слайдер на базе Swiper с видео YouTube в iframe не двигается при свайпе?
- 1 подписчик
- вчера
- 48 просмотров
0

ответов
JavaScript

+1 ещё

Простой
Как добавить параметры стиля и другие атрибуты в ячейку DataTables в режиме server-side?
- 1 подписчик
- вчера
- 47 просмотров
1

ответ
JavaScript

Простой
Почему на сайтах в js коде используются непонятные однобуквенные переменные и что они значат?
- 1 подписчик
- 12 нояб.
- 12457 просмотров
8

ответов
Показать ещё Загружается…

JavaScript FullStack разработчик

Rocket • Смоленск

от 80 000 до 130 000 ₽

Fullstack разработчик JavaScript, php

Дорстрой-36 • Воронеж

от 100 000 до 200 000 ₽

JavaScript FullStack developer

Wanted. • Санкт-Петербург

До 220 000 ₽

Доработать поиск изображений на ElasticSearch

15 нояб. 2024, в 03:14

5000 руб./за проект

Заказ на 4 баннера для гемблинга

15 нояб. 2024, в 03:04

7000 руб./за проект

Голосовой браузерный ИИ ассистент

14 нояб. 2024, в 23:04

1500 руб./в час

Answer 1 · 2024-09-26 14:48:35

$(function () {
$("#sortable").sortable({
disabled: true
});

$("#sortable").on("touchstart", function () {
$(this).sortable("option", { disabled: false });
$(this).sortable("refresh");
});
});

Answer 2 · 2024-09-27 12:38:59

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>jQuery UI Sortable - Default functionality</title>
	<link rel="stylesheet" href="https://code.jquery.com/ui/1.14.0/themes/base/jquery-ui.css">
	<style>
		#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;
		}

		#sortable li span {
			position: absolute;
			margin-left: -1.3em;
		}
	</style>
	<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
	<script src="https://code.jquery.com/ui/1.14.0/jquery-ui.js"></script>
	<script src="jquery.ui.touch-punch.min.js"></script>
	<script>
		$(function () {
			const $sortable = $("#sortable");

			$sortable.sortable({
				disabled: true
			});

			$sortable.on("contextmenu", function (e) {
				e.preventDefault();
			});

			$sortable.on("touchstart", function () {
				$(this).sortable("option", "disabled", false);
			});
		});
	</script>
</head>

<body>

	<ul id="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"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li>
	</ul>

</body>

</html>

Как запустить Jquery Sortable по событию touchstart?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт