Html
<html>
<!-- заголовок -->
<head>
<meta charset="utf-8">
<title>Example</title>
</head>
<!-- страница -->
<body>
<!-- подключаем библиотеки jQuery и jQuery UI -->
<script src="https://dir.by/example_lib/jquery/jquery-3.3.1.min.js"></script>
<script src="https://dir.by/example_lib/jquery_ui/jquery-ui-1.12.1/jquery-ui.min.js"></script>
<!-- HTML элементы -->
<div id="myElement1" style='height:100px; width:100px; float:left; background-color:#e9e9e9; cursor:hand; margin-right:20px;'>
<p>Нажми на меня и тащи мышкой</p>
</div>
<div id="myElement2" style='height:250px; width:250px; float:left; background-color:#d0d0d0;'>
<p>Брось здесь</p>
</div>
<!-- JavaScript -->
<script>
// страница открылась
$( function()
{
// вызываем метод draggable чтобы элемент мог перетаскиваться myElement1
$("#myElement1").draggable();
// вызываем droppable чтобы элемент myElement1 мог быть брошен в элемент myElement2
$("#myElement2").droppable(
{
// обработчик (что будем делать при бросании myElement1)
drop: function(event, ui)
{
// меняем цвет
$(this).css("background-color", "#f0f0a0");
// меняем текст
$(this).find("p").html("Элемент брошен");
}
});
});
</script>
</body>
</html>
Объяснение
В коде добавилась одна строчка это подключение библиотеки
jQuery UI Touch Punch ... для перетаскивания на планшете, телефоне.
Html
<script src="https://dir.by/example_lib/touch-punch/jquery.ui.touch-punch.js"></script>
Весь код примера для перетаскивания на планшете, телефоне
В коде добавленная строчка выделена
синим цветом.
Html
<html>
<!-- заголовок -->
<head>
<meta charset="utf-8">
<title>Example</title>
</head>
<!-- страница -->
<body>
<!-- подключаем библиотеки jQuery и jQuery UI -->
<script src="https://dir.by/example_lib/jquery/jquery-3.3.1.min.js"></script>
<script src="https://dir.by/example_lib/jquery_ui/jquery-ui-1.12.1/jquery-ui.min.js"></script>
<!-- библиотека перетаскивания для планшета, телефона -->
<script src="https://dir.by/example_lib/touch-punch/jquery.ui.touch-punch.js"></script>
<!-- HTML элементы -->
<div id="myElement1" style='height:100px; width:100px; float:left; background-color:#e9e9e9; cursor:hand; margin-right:20px;'>
<p>Нажми на меня и тащи мышкой</p>
</div>
<div id="myElement2" style='height:250px; width:250px; float:left; background-color:#d0d0d0;'>
<p>Брось здесь</p>
</div>
<!-- JavaScript -->
<script>
// страница открылась
$( function()
{
// вызываем метод draggable чтобы элемент myElement1 мог перетаскиваться
$("#myElement1").draggable();
// вызываем droppable чтобы элемент myElement1 мог быть брошен в элемент myElement2
$("#myElement2").droppable(
{
// обработчик (что будем делать при бросании myElement1)
drop: function(event, ui)
{
// меняем цвет
$(this).css("background-color", "#f0f0a0");
// меняем текст
$(this).find("p").html("Элемент брошен");
}
});
});
</script>
</body>
</html>
Ваши Отзывы ... комментарии ...