Link HTML elements

Question

Link HTML elements

Navigation

#1 by (3 votes)

3

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

My question is: how could I do when I put div inside panel it binds to it and when I try to drag panel , I drag it and div ? And does this panel automatically adjust itself to the size of div ?

This happens on the scrumwise site.

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 bootstrap too!

javascript html drag-n-drop

asked by anonymous 23.01.2016 / 15:45

1 answer

Check tab type in a CSV file dompdf php to pdf

score 3 · Accepted Answer

Look at 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 set div.div and div#panel to .draggable() . After that I use .droppable in #panel , so that drop is possible.

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

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

The callback of drop , causes div#panel to match the element "loose",

and I make a .draggable('destroy') in the .div so that it is no longer possible to drag it. Then I add this div to div.panel-body , of its #panel . And I change some of the% css of% css so it does not get badly adjusted.

In%% use only a dash, for drag tagging.

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

I hope you have helped.