jQuery UI: Draggable

Draggable Elements

by Florent27000

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/overcast/jquery-ui.css">
			<div id="dqip">
			  <a href="#" id="1" style="position: absolute; right: 5px; top:5px;" class="ajout-boite ">ajouter</a>

			  <div class="resizeDiv" style="left: 30px; top: 30px; width: 50px; height: 50px;" id="41">
			    <div class="id_button">1</div>
			  </div>
			</div>

CSS

.resizeDiv:hover {
        opacity: 0.8;
      }

      .resizeDiv {
        position: absolute;
        border: 1px solid #1877D5;
        background: #84BEFD;
        opacity: 0.3;
      }

      div.id_button {
        cursor: move;
        margin: 0;
        padding: 0px 2px;
        position: absolute;
        top: -23px;
        left: -1px;
        color: #000;
        z-index: 10;
        font-size: 14px;
        background-color: red;
        opacity: 0.9 !important;
        border: 1px dashed #000;
        display: none;
      }

      .resizeDiv:hover div.id_button {
        display: block;
      }

      #dqip {
        position: relative;
        margin-top: 2px;
        margin-bottom: 2px;
        height: 400px;
        width: 650px;
        border: 1px solid #000;
      }

JavaScript

$(".resizeDiv").draggable().resizable();

$(".ajout-boite").on('click', function() {
  $('#dqip').append('<div class="resizeDiv ui-draggable ui-draggable-handle ui-resizable" style="left: 388px; top: 17px; width: 78px; height: 65px;" id="5"><div class="id_button">2</div><div class="ui-resizable-handle ui-resizable-e" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-s" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90;"></div></div>');
});