Introduction
This article shows how to prevent dragging from a specific area using jQuery.
This article shows how you to prevent things from being dragged from a specific place, you can drag the Content/Element within a Div but if you will try to drag it outside it will return to it's original position.
Step 1
First of all you need to add two jQuery files to your application, they are:
- jQuery-1.9.1
- jQuery-ui.js
You can either download the source code provided at the top of this article for getting these jQuery files or you can download these from the jQuery official website.
After downloading these files you need to add them to the head section of your application:
<head runat="server">
<title></title>
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
Step 2
Now I will create two Divs in which the first one will be the parent Div and the second one will be the Div to be dragged.
Write this code in the body section:
<body>
<div id="dropInMe" class="ui-widget-header">
<p>Drop the two Div here</p>
<div id="dragMe2">
<p>I will get back when I'm not dropped</p>
</div>
</div>
</body>
Here "dropInMe" is the container Div and "dragMe2" is the Div that will be dragged.
Step 3
Now we need to work on the JavaScript of this application so write this code in the head section:
<script>
$(function () {
$("#dragMe2").draggable({ revert: "invalid" });
$("#dropInMe").droppable({
activeClass: "ui-state-default",
drop: function (event, ui) {
$(this)
.addClass("ui-state-highlight")
.find("p")
}
});
});
</script>
Here I created a function in which the first ID of the child Div is used, with this child Div the "draggable" event is used, the revert of this child Div is made invalid.
On the parent Div the "droppable" event is used, it will check for the <p> tag in it and if you want to change the text on this parent div when something is dragged onto it then you can do that by applying .html("write something").
Now our application is created and is ready for execution.
Output
On running the application you will get an output like this:
![not allowing to drag]()
You can see that a small Div is available in the Large div, now if I try to drag it to outside of the Div then this will happen:
![not allowing to drag]()
The complete code of this application is as follows:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style>
#dragMe, #dragMe2 { width: 100px; border: 1px black solid; color: rgb(216, 27, 140); height: 100px;
padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
#dropInMe { width: 150px; height: 150px; border: 1px black solid; background-color: grey;
padding: 0.5em; float: left; margin: 10px; }
</style>
<script>
$(function () {
$("#dragMe2").draggable({ revert: "invalid" });
$("#dropInMe").droppable({
activeClass: "ui-state-default",
drop: function (event, ui) {
$(this)
.addClass("ui-state-highlight")
.find("p")
}
});
});
</script>
</head>
<body>
<div id="dropInMe" class="ui-widget-header">
<p>Drop the two Div here</p>
<div id="dragMe2">
<p>I will get back when I'm not dropped</p>
</div>
</div>
</body>
</html>