Estou tentando fazer um projetinho só pra aprender mais sobre HTML5, CSS3 e Javascript. Nesse projeto tenho uma div
que é tipo um panel
e uma outra div
que seria um quadrado que eu iria colocar dentro desse panel
. Estou usando o drag and drop para poder arrastar esses elementos pela tela.
Minha pergunta é: como que poderia fazer para quando eu colocar a div
dentro do panel
ela se vincular a ele e quando eu tentar arrastar o panel
, eu arraste ele e a div
? E também esse panel se ajustar automaticamente ao tamanho da div
?
Isso acontece no site da scrumwise...
O código que já tenho é esse aqui:
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>
O javascript
<script type="text/javascript">
$(function () {
$("#panel").draggable();
$("#div").draggable();
});
</script>
Outra coisa, estou usando o bootstrap também!