How to Create Drag and Drop By J query.

File You need to achive dragable and dropable functionality.
jquery-1.8.2.min.js
jquery-ui-1.8.24.custom.min.js

Note: You can download this file from J-query Main Site

  $(document).ready(function () {

    $(".dragable").draggable({
        revert: "invalid" // when not dropped, the item will revert back to its initial position
    });

    $(".dropableRow").droppable({
        tolerance: "fit",
        drop: function (ev, ui) {

            //to get the id
            //ui.draggable.attr('id') or ui.draggable.get(0).id or ui.draggable[0].id
            var draggableId = ui.draggable.attr("id");
            var droppableId = $(this).attr("id");
            alert("dragable Element Id" + draggableId + " dropableId  " + droppableId);
        }
    });
});

Note : Make sure you have included these file for working drag and drop functionality:

       <!-- Have to must add without this css drag and drop will not work -->
       <!-- Make sure you have given correct path for href attribute -->
       <link type="text/css" href="Styles/jquery-ui-1.8.24.custom.css" rel="Stylesheet" />

       <!-- Have to must add without this drag and drop will not work →
       <!-- Make sure you have given correct path for src attribute -->
       <script type="text/javascript" src="Scripts/jquery-1.8.2.min.js"></script>
       <script type="text/javascript" src="Scripts/jquery-ui-1.8.24.custom.min.js"></script>

Html Code:

<body>
    <form id="form1" runat="server">

    <div id="feedBackMainForm">
           <div class="dropableMainCont">
                <div class="dropableRow" id="dropableRow1"></div>
                <div class="dropableRow" id="dropableRow2"></div>
                <div class="dropableRow" id="dropableRow3"></div>
                <div class="dropableRow" id="dropableRow4"></div>
                <div class="dropableRow" id="dropableRow5"></div>
           </div>
           <div id="items">
               <div class= "dragable" id ="item1">Text Box</div>
               <div class= "dragable" id ="item2">Label</div>
               <div class= "dragable" id ="item3">Textarea</div>
               <div class= "dragable" id ="item4">CheckBox</div>
               <div class= "dragable" id ="item5">Button </div>
           </div>
    </div>
    </form>
</body>

In abve HTML we make Text Box as dragable by Jquery function.

</pre>
 $(".dragable").draggable({
 helper: "clone",
 revert: "invalid"
 });
<pre>

and make

as dropable by calling

</pre>
$(".dropableRow").droppable({
 helper: "clone",
 accept: ".draggable",
 tolerance: "fit",
 drop: function (ev, ui) {
 // Execute Logic what ever you want here.
 }
 });
<pre>

Style Sheet:

<!-- In File Style Sheet -->
      <style type="text/css">

          #items{
             width:120px;
             height:270px;
             border:1px solid #110000;
             float:left;
          }
          .dragable
          {
            background-color: #DBDBDB;
            border:1px solid black;
            cursor: move;
            font-size: 15pt;
            height: 40px;
            line-height: 40px;
            margin: 10px;
            position: relative;
            text-align: center;
            width: 100px;
            z-index:20px;
          }
           .dropableRow{
            background-color: #DBDBDB;
            border:1px solid black;
            font-size: 15pt;
            height: 60px;
            line-height: 40px;
            margin: 4px;
            position: relative;
            text-align: center;
            width: 389px;
            float: left;
          }
          .dropableMainCont
          {
            background-color: #DBDBDB;
            border:1px solid Red;
            font-size: 15pt;
            height: 400px;
            padding:10px;
            width: 400px;
            float: left;
          }
          #feedBackMainForm
          {
              width:100%;
          }

          textarea {
             overflow:hidden;
          }
      </style>

Jquery Error: Draggable function is not defined or not found. Droppable function is not found or not defined.This error occur when you might forget to add jquery-ui-1.8.24.custom.css file

       <!-- Have to must add without this css drag and drop will not work -->
       <!-- Make sure you have given correct path for href attribute -->
       <link type="text/css" href="Styles/jquery-ui-1.8.24.custom.css" rel="Stylesheet" />

or might forget to add jquery-1.8.2.min.js or jquery-ui-1.8.24.custom.min.js file then in this case generally we get this error.

       <!-- Have to must add without this drag and drop will not work →
       <!-- Make sure you have given correct path for src attribute -->
       <script type="text/javascript" src="Scripts/jquery-1.8.2.min.js"></script>
       <script type="text/javascript" src="Scripts/jquery-ui-1.8.24.custom.min.js"></script>
About these ads

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s