Post
Ask Question

Prevent Dragging To a Specified Area Using jQuery

Introduction

 
In my previous article, I told you how to Prevent Dragging From a Specified Area Using jQuery.
 
In this article, I will tell you how to prevent dragging to a specified area using jQuery.
 
In this article I will show how to prevent things from being dragged to a specific place, you can drag the Content/Element around on the page but if you try to drag it inside a specific area then it will return to its last position.
 
Step 1
 
First of all, you need to add two jQuery files to your application, they are:
  1. jQuery-1.9.1
  2. 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 as in the following:
  1. <head runat="server">  
  2.     <title></title>  
  3.     <script src="//code.jquery.com/jquery-1.9.1.js"></script>  
  4.     <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>  
  5.  </head> 
Step 2

Now I will create two Div in which the first one will be the Div to be dragged and the second one will be the Div in which the first one is to be dragged.
 
Write this code in the body section:
  1. <body>  
  2.     <div id="dragMe">  
  3.         <p>I will get back when I'm dropped</p>  
  4.     </div>  
  5.    
  6.     <div id="dropInMe" class="ui-widget-header">  
  7.         <p>Drop the Div here</p>  
  8.     </div>  
  9. </body> 
Here "dropInMe" is the container Div and "dragMe" is the Div to be dragged.
 
Step 3
 
Now we need to work on the JavaScript of this application so write this code in the head section:
  1. <script>  
  2.     $(function () {  
  3.         $("#dragMe").draggable({ revert: "valid" });  
  4.   
  5.         $("#dropInMe").droppable({  
  6.             activeClass: "ui-state-default",  
  7.             drop: function (event, ui) {  
  8.                 $(this)  
  9.                   .addClass("ui-state-highlight")  
  10.                   .find("p")  
  11.             }  
  12.         });  
  13.     });  
  14. </script> 
Here I have created a function in which first the ID of the child Div is used, with this child Div the "draggable" event is used, 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 this by applying .html("write something").
 
Now our application is created and is ready for execution.
 
Output
 
On running the application you will get output like this:
 
not allowing to drag
 
Now I will drag the small Div into the large one.
 
not allowing to drag
 
But as I dropped it, it slid back to its original position:
 
not allowing to drag
 
The complete code of this application is as follows:
  1. <html xmlns="http://www.w3.org/1999/xhtml">  
  2. <head runat="server">  
  3.     <title></title>  
  4.     <script src="//code.jquery.com/jquery-1.9.1.js"></script>  
  5.     <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>  
  6.     <style>  
  7.         #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; }  
  8.         #dropInMe { width: 150px; height: 150px; border: 1px black solid; background-color: grey; padding: 0.5em; float: left; margin: 10px; }  
  9.     </style>  
  10.     <script>  
  11.         $(function () {  
  12.             $("#dragMe").draggable({ revert: "valid" });  
  13.    
  14.             $("#dropInMe").droppable({  
  15.                 activeClass: "ui-state-default",  
  16.                 drop: function (event, ui) {  
  17.                     $(this)  
  18.                       .addClass("ui-state-highlight")  
  19.                       .find("p")  
  20.                 }  
  21.             });  
  22.         });  
  23.     </script>  
  24. </head>  
  25. <body>   
  26.     <div id="dragMe">  
  27.         <p>I will get back when I'm dropped</p>  
  28.     </div>  
  29.    
  30.     <div id="dropInMe" class="ui-widget-header">  
  31.         <p>Drop the Div here</p>  
  32.     </div>   
  33. </body>  
  34. </html> 


Similar Articles