How to drag a div within a div?

Question

I want to add some div using drag and drop mechanism. I have a main div in which I add some other: When I drag div texted "HI" into below div, I append two other divs called Drag and Drop into the main div.

Now what I want is to have the ability to drag the div texted "Drag", and drop it into div texted "Drop". How can I achieve that?

Here is my code:

$(function() {
  $(".draggable").draggable({
    revert: true,
    helper: 'clone',
    start: function(event, ui) {

      $(this).fadeTo('fast', 0.5);
    },
    stop: function(event, ui) {
      $(this).fadeTo(0, 1);
    }
  });
  $("#div2").draggable({
    start: function(event, ui) {
      alert('div2-drag');
      $(this).fadeTo('fast', 0.5);
    },
    stop: function(event, ui) {
      $(this).fadeTo(0, 1);
    }
  });
  $("#div1").droppable({
    hoverClass: 'active',
    drop: function(event, ui) {
      alert('div1-drop');
      //this.value = $(ui.draggable).text();
      $("#mydiv").append('<div id="div1" ></div><div id="div2" ></div> ');
    }
  });


  $("#mydiv").droppable({
    hoverClass: 'active',
    drop: function(event, ui) {
      alert('mydiv - drop');
      //this.value = $(ui.draggable).text();
      $("#mydiv").append('<div id="div1"  > Drop</div><div id="div2"  ondragstart="drag(event)" > Drag</div> ');
    }
  });
  $("#mydiv_second").droppable({
    hoverClass: 'active',
    drop: function(event, ui) {
      alert('mydivsecond- drop');
      //this.value = $(ui.draggable).text();
      $("#mydiv_second").append('<div id="div1"  > Drop</div><div id="div2"  ondragstart="drag(event)" > Drag</div> ');
    }
  });
});

body {
  font-family: sans-serif;
  font-size: 11pt;
}
.draggable {
  width: 250px;
  height: 20px;
  background-color: #e6eaff;
  border: 2px solid #3399cc;
  margin-bottom: 1em;
  padding: 4px;
  cursor: default;
}
.active {
  border: 2px solid #6699ff;
}
#mydiv {
  width: 350px;
  height: 300px;
  background-color: #e6eaff;
  border: 2px solid #3399cc;
  margin-bottom: 1em;
  padding: 4px;
  cursor: default;
}
#mydiv_second {
  width: 350px;
  height: 300px;
  background-color: #e6eaff;
  border: 2px solid #3399cc;
  margin-bottom: 1em;
  padding: 4px;
  cursor: default;
}
#div1 {
  width: 150px;
  height: 70px;
  background-color: #e6eaff;
  border: 2px solid #3399cc;
  margin-bottom: 1em;
  padding: 4px;
  cursor: default;
}
#div2 {
  width: 30px;
  height: 30px;
  background-color: #e6eaff;
  border: 2px solid #3399cc;
  margin-bottom: 1em;
  padding: 4px;
  cursor: move;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<div class="draggable">hi!</div>
<div id="mydiv"></div>
<div id="mydiv_second"></div>

You can also see it on this jsFiddle

score 0 · Accepted Answer · answered Jul 29 '15 at 12:39

The problem why you can't do drag-and-drop of the div texted "Drag" is that you are executing .draggable() and .dropable() methods before the elements are created (you do it when the page loads).

The issue if fixed if you move this code:

$("#div2").draggable({
    start: function(event, ui) {
        alert('div2-drag');
        $(this).fadeTo('fast', 0.5);
    },
    stop: function(event, ui) {
        $(this).fadeTo(0, 1);
    }
});
$("#div1").droppable({
    hoverClass: 'active',      
    drop: function(event, ui) {
        alert('div1-drop');
        //this.value = $(ui.draggable).text();
        $( "#mydiv" ).append( '<div id="div1" ></div><div id="div2" ></div> ' );
    }
});

And place it in the $("#mydiv").droppable section, right after you have created both #div1 and #div2 (notice that you are always creating the divs with the same id, and that could create problems when you add more than one).

The result would be like this:

$(function() {
  $(".draggable").draggable({
    revert: true,
    helper: 'clone',
    start: function(event, ui) {

      $(this).fadeTo('fast', 0.5);
    },
    stop: function(event, ui) {
      $(this).fadeTo(0, 1);
    }
  });


  $("#mydiv").droppable({
    hoverClass: 'active',
    drop: function(event, ui) {
      alert('mydiv - drop');
      //this.value = $(ui.draggable).text();
      $( "#mydiv" ).append( '<div id="div1"  > Drop</div><div id="div2"  ondragstart="drag(event)" > Drag</div> ' );

      $("#div2").draggable({
        start: function(event, ui) {
          alert('div2-drag');
          $(this).fadeTo('fast', 0.5);
        },
        stop: function(event, ui) {
          $(this).fadeTo(0, 1);
        }
      });
      $("#div1").droppable({
        hoverClass: 'active',      
        drop: function(event, ui) {
          alert('div1-drop');
          //this.value = $(ui.draggable).text();
          $( "#mydiv" ).append( '<div id="div1" ></div><div id="div2" ></div> ' );
        }
      });
    }
  });
  $("#mydiv_second").droppable({
    hoverClass: 'active',
    drop: function(event, ui) {
      alert('mydivsecond- drop');
      //this.value = $(ui.draggable).text();
      $( "#mydiv_second" ).append( '<div id="div1"  > Drop</div><div id="div2"  ondragstart="drag(event)" > Drag</div> ' );
      $("#div2").draggable({
        start: function(event, ui) {
          alert('div2-drag');
          $(this).fadeTo('fast', 0.5);
        },
        stop: function(event, ui) {
          $(this).fadeTo(0, 1);
        }
      });
      $("#div1").droppable({
        hoverClass: 'active',      
        drop: function(event, ui) {
          alert('div1-drop');
          //this.value = $(ui.draggable).text();
          $( "#mydiv" ).append( '<div id="div1" ></div><div id="div2" ></div> ' );
        }
      });
    }
  });
});

function drag(e) {}

body {
    font-family: sans-serif;
    font-size: 11pt;
}
.draggable {
    width: 250px;
    height: 20px;
    background-color: #e6eaff;
    border: 2px solid #3399cc;
    margin-bottom: 1em;
    padding: 4px;
    cursor: default;
}
.active {
    border: 2px solid #6699ff;
}

#mydiv
{
    width: 350px;
    height: 300px;
    background-color: #e6eaff;
    border: 2px solid #3399cc;
    margin-bottom: 1em;
    padding: 4px;
    cursor: default;
}
#mydiv_second
{
    width: 350px;
    height: 300px;
    background-color: #e6eaff;
    border: 2px solid #3399cc;
    margin-bottom: 1em;
    padding: 4px;
    cursor: default;
}
#div1
{
    width: 150px;
    height: 70px;
    background-color: #e6eaff;
    border: 2px solid #3399cc;
    margin-bottom: 1em;
    padding: 4px;
    cursor: default;
}
#div2
{
    width: 30px;
    height: 30px;
    background-color: #e6eaff;
    border: 2px solid #3399cc;
    margin-bottom: 1em;
    padding: 4px;
    cursor: move;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">

<div class="draggable">hi!</div>
<div id="mydiv"></div>
<div id="mydiv_second"></div>

hello Alvaro Montoro I have try Your code but still problem are not slove . you can put your code in my : jsFiddle file after exactitude — Sumit patel, Jul 30 '15 at 04:35
What is the problem not solved? You'll need to be more specific — Alvaro Montoro, Jul 30 '15 at 10:37
Hello Alvaro Montoro. Thanks for your response. Given solution works fine for me but with some issues. Here are they: The first issue is div texted with "Drag" drags into div texted "Drop" but when I drop this div it also append this two div again as droppble event of div called "mydiv" called again. I don't want this to be happened. Another issue , I am able to drag div texted "Drag" into whole everywhere on the page but not the specific "mydiv" div. I want "Drag" div is only able to drop within the "mydiv" div. — Sumit patel, Jul 30 '15 at 11:54

How to drag a div within a div?

1 Answers1