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 it's 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:

<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 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:

<body>

    <div id="dragMe">

        <p>I will get back when I'm dropped</p>

    </div>

 

    <div id="dropInMe" class="ui-widget-header">

        <p>Drop the Div here</p>

    </div>

</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:

    <script>

        $(function () {

            $("#dragMe").draggable({ revert: "valid" });

 

            $("#dropInMe").droppable({

                activeClass: "ui-state-default",

                drop: function (event, ui) {

                    $(this)

                      .addClass("ui-state-highlight")

                      .find("p")

                }

            });

        });

    </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 it's original position:

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 { width100pxborder1px black solidcolorrgb(216, 27, 140)height100pxpadding0.5emfloatleftmargin10px 10px 10px 0; }

        #dropInMe { width150pxheight150pxborder1px black solidbackground-colorgreypadding0.5emfloatleftmargin10px; }

    </style>

    <script>

        $(function () {

            $("#dragMe").draggable({ revert: "valid" });

 

            $("#dropInMe").droppable({

                activeClass: "ui-state-default",

                drop: function (event, ui) {

                    $(this)

                      .addClass("ui-state-highlight")

                      .find("p")

                }

            });

        });

    </script>

</head>

<body> 

    <div id="dragMe">

        <p>I will get back when I'm dropped</p>

    </div>

 

    <div id="dropInMe" class="ui-widget-header">

        <p>Drop the Div here</p>

    </div> 

</body>

</html>