Link HTML elements

Question

I’m trying to make a little project just to learn more about HTML5, CSS3 and Javascript. In this project I have a div which is kind of a panel and another div that would be a square that I would put inside that panel. I’m using the drag and drop to be able to drag these elements around the screen.

My question is: how could I do for when I put the div within the panel she bind herself to it and when I try to drag the panel, I drag him and the div? And also this panel automatically adjust to the size of the div?

This happens on the website of scrumwise...

The code I already have is this one:

panel

 <div class="panel panel-success" id="panel">
            <div class="panel-heading">
                <h3 class="panel-title">Qualquer texto</h3>
            </div>
            <div class="panel-body">

            </div>
 </div>

Div

<div style="width:100px; height: 100px; background-color: black;" id="div">

</div>

The javascript

 <script type="text/javascript">
    $(function () {
        $("#panel").draggable();
        $("#div").draggable();
    });
</script>

Another thing, I’m using the bootstrap also!

Answer 1

Look this example I made in Jsfiddle.

The javascript was this:

$(document).ready(function() {
  $("#panel").draggable();
  $(".div").draggable();
  $("#panel").droppable({
    accept: ".div",
    drop: function() {
      $(this).css({
        background: "red",
        height: "auto",
        width: "auto",
        display: "inline-block"
      });
      $(".panel .panel-body").css({
        height: "auto",
        width: "auto"
      });
      $('.div').draggable('destroy');
      $('.div').appendTo(".panel .panel-body");
      $('.div').css({
        position: "relative",
        left: 0,
        top: 0
      });
    },
    hoverClass: "hover"
  });
})

First, I define the div.div and the div#panel with the .draggable(). After that I use the .droppable in the #panel, so that the drop.

The .droppable takes as argument an object that has the following keys:

• Accept - acceptable element at the time of drag.
• drop - callback to be called after the drop down.
• hoverClass - class triggered at the time of the drag.

The callback of drop, I make her div#panel fits the "loose element",

and make a .draggable('destroy') in .div so that it is no longer possible to drag it. Then add this div to div.panel-body, of your #panel. And change a little bit of the css of .div so she doesn’t get bad adjusted.

In the hoverClass I use only one stroke for the marking of drag.

The rest of the css you can see in the fiddle, is quite simple.

I hope it helped.