Html
<html>
<!-- heading -->
<head>
<meta charset="utf-8">
<title>Example</title>
</head>
<!-- page -->
<body>
<!-- connect libraries jQuery and 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>
<!-- connect styles jQuery UI -->
<link rel="stylesheet" href="https://dir.by/example_lib/jquery_ui/jquery-ui-1.12.1/jquery-ui.min.css">
<!-- HTML Elements -->
<div id="myElement1" style='height:100px; width:100px; background:#DAF0DA;'>
<p>Stretch</p>
</div>
<!-- the page has opened -->
<script>
$( function()
{
// element myElement1 Can be stretched
$("#myElement1").resizable();
});
</script>
</body>
</html>
Explanation
One line is added to the code, this is the connection of the library
jQuery UI Touch Punch ... for stretching on tablet, phone.
Html
<script src="https://dir.by/example_lib/touch-punch/jquery.ui.touch-punch.js"></script>
All sample code to stretch on tablet, phone
In the code, the added line is highlighted
Blue.
Html
<html>
<!-- heading -->
<head>
<meta charset="utf-8">
<title>Example</title>
</head>
<!-- page -->
<body>
<!-- connect libraries jQuery and 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>
<!-- connect styles jQuery UI -->
<link rel="stylesheet" href="https://dir.by/example_lib/jquery_ui/jquery-ui-1.12.1/jquery-ui.min.css">
<!-- drag-and-drop library for tablet, phone -->
<script src="https://dir.by/example_lib/touch-punch/jquery.ui.touch-punch.js"></script>
<!-- HTML Elements -->
<div id="myElement1" style='height:100px; width:100px; background:#DAF0DA;'>
<p>Stretch</p>
</div>
<!-- the page has opened -->
<script>
$( function()
{
// element myElement1 Can be stretched
$("#myElement1").resizable();
});
</script>
</body>
</html>
Your feedback ... Comments ...