Jquery dragStop event

Jquery dragStop event is used to end the drag functionality of the data, image, text, dialog box, and other features using jquery methods. The dragStop event utilizes the different jquery methods.

Jquery dragStop event using dialog box

The dialog() function works with the dragStop event using jquery. The dragStop event helps to move or drag the dialog box anywhere on the web page. It shows the output after stopping dragging the function or box.

Syntax

The following syntax displays to get a dragStop event using a dialog box for various functionality. It works similarly to the dragstop function.

$("#javatpoint2").dialog({
dragStop: function (event, ui) {
console.log(' start dragged')
},
});

Here we show the jquery dialog() function to get the object.
The dragStop event uses to move one object from one place to another.
We can place the required functionality in the dialog box to display.

Examples

The examples use the jquery dragStop event for the multiple features and functionalities.

Example 1

The following example uses the dragStop event for the popup box. Here we use the dialog box for the dragStop event.

<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<link href =
"https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js">
</script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js">
</script>
<script type="text/javascript">
$(function () {
$("#javatpoint2").dialog({
autoOpen: false,
dragStop: function (event, ui) {
document.getElementById("output_data").innerHTML = "dragStop event Deactiveted";
 },
});
$("#javatpoint").click(function () {
$("#javatpoint2").dialog("open");
});
});
</script>
</head>
<body>
<h4> Jquery DragStop </h4>
<h5 id = "output_data" style = "color:red;"> </h5>
<div id = "javatpoint2" title = "JavaTpoint">
<h5 style = "margin-top:3px;"> JQuery DragStop Event </h5>
<textarea>
jQuery UI DragStop event
</textarea>
</div>
<button id = "javatpoint"> Click Here to Open Dialog </button>
</body>
</html>

Output

The output shows before the dragStop event and after the dragStop event.

Example 2

The following example works to operate the dragstop event for the dialog box. Here we use the dialog box for the moving box and get a notification end of dragging.

<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<link href =
"https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js">
</script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js">
</script>
<script type="text/javascript">
$(function () {
$("#javatpoint2").dialog({
autoOpen: true,
dragStop: function (event, ui) {
document.getElementById("output_data").innerHTML = "dragstop event stop dragging";
 },
});
});
</script>
</head>
<body>
<h4> Jquery Dragstop event </h4>
<h5 id = "output_data" style = "color:red;"> </h5>
<div id = "javatpoint2" title = "JavaTpoint">
<img src="img_lights.jpg" style="width:550px; height:100px">
</div>
</body>
</html>

Output

The output shows before the dragstop event and after the dragstop event.

jQuery dragstop Event using draggabilly() method

The draggabilly() function uses with the dragstop event using jquery. The dragstop event helps move text, images, and containers anywhere on the web page.

Syntax

The following syntax shows to get the dragstop event using the draggabilly() method for the various functionality.

<script src = "https://unpkg.com/draggabilly@3/dist/draggabilly.pkgd.min.js">
</script>
<script type="text/javascript">
$(function () {
$( "#javatpoint2" ).draggable({
  stop: function( event, ui ) {}
});
$( "#javatpoint2" ).on( "dragstop", function( event, ui ) {
console.log("dragstop event stop the dragging");
});
});

Examples

The examples use the jquery dragstop event for the multiple features and functionalities.

Example1

The following example uses a dragstop event for the container or box. Here we use the draggabilly() method for the dragstop event.

<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<link href =
"https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js">
</script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js">
</script>
<script src = "https://unpkg.com/draggabilly@3/dist/draggabilly.pkgd.min.js">
</script>
<script type="text/javascript">
$(function () {
$( "#javatpoint2" ).draggable({
  stop: function( event, ui ) {}
});
$( "#javatpoint2" ).on( "dragstop", function( event, ui ) {
document.getElementById("output_data").innerHTML = "dragstop event stop the dragging";
console.log("dragstop event stop the dragging");
});
});
</script>
</head>
<body>
<h4> Jquery Dragstop event </h4>
<h5 id = "output_data" style = "color:red;"> </h5>
<div id = "javatpoint2" title = "JavaTpoint" style = "background-color:orange; width:50%; height:20%;">
<h5 style = "margin-top:3px;"> JQuery Dragstop Event using draggabilly() method </h5>
<p id = "javatpoint1">
Click on the box and start and stop to drag
</p>
</div>
</body>
</html>

Output

The output shows before the dragstop event and after the end of the dragging function.

Exampl2

The following example uses a dragstop event for the container or box. Here we use the draggabilly() method for the dragstop event.

<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<link href =
"https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js">
</script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js">
</script>
<script src = "https://unpkg.com/draggabilly@3/dist/draggabilly.pkgd.min.js">
</script>
<script type="text/javascript">
$(function () {
$( "#javatpoint2" ).draggable({
  stop: function( event, ui ) {}
});
$( "#javatpoint2" ).on( "dragstop", function( event, ui ) {
document.getElementById("output_data").innerHTML = "dragstop event stop the dragging";
console.log("dragstop event stop the dragging");
});
$("#javatpoint").click(function () {
$("#javatpoint2").show();
});
});
</script>
</head>
<body>
<h4> Jquery Dragstop event </h4>
<h5 id = "output_data" style = "color:red;"> </h5>
<button id = "javatpoint"> Click Here to Open Dialog </button>
<div id = "javatpoint2" title = "JavaTpoint" style = "background-color:orange; width:25%; height:20%; display:none;">
<h5 style = "margin-top:3px;"> JQuery Dragstop Event using draggabilly() method </h5>
<p id = "javatpoint1">
Click on the box and start and stop to drag
</p>
</div>
</body>
</html>

Output

The output shows before the dragstop event and after the end of the dragging function.

Example3

The following example uses a dragstop event for the image. Here we use the draggabilly() method to drag the image on the web page.

<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<link href =
"https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js">
</script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js">
</script>
<script src = "https://unpkg.com/draggabilly@3/dist/draggabilly.pkgd.min.js">
</script>
<script type="text/javascript">
$(function () {
$( "#javatpoint2" ).draggable({
  stop: function( event, ui ) {}
});
$( "#javatpoint2" ).on( "dragstop", function( event, ui ) {
document.getElementById("output_data").innerHTML = "dragstop event stop the dragging";
console.log("dragstop event stop the dragging");
});
});
</script>
</head>
<body>
<h4> Jquery Dragstop event </h4>
<h5 id = "output_data" style = "color:red;"> </h5>
<div id = "javatpoint2" title = "JavaTpoint" style = "width:20%; height:20%;">
<img src = "img_lights.jpg" style = "width:150px; height:100px">
</div>
</body>
</html>

Output

The output shows before the dragstop event and after the dragstop event.

Conclusion

The dragstop event shows the draggable value and informs the notification after the dragging stop. This function stops drag that is already moving or dragged from one place to another on the web page.

Next TopicPicture Puzzle Game using Jquery

← prev next →