title: drag and drop and resize div in jQuery
body: <p>I have two spaces, the first have an artefacts serie (divs) and the second is a work area in which the artefacts dragged from the first space can be newly dragged and dropped, resized and join between these.
  At the moment, I can (working about an example in the web) drag the artefacts and drop it in the work area, where I can drag and drop newly this artefact, but i can't resize it. To say true, I don't have tried to do the join between the artefacts but it would be of great help to me if please you say to me any idea to do it.
  The code that I have  is:</p>
  
  <pre><code>jQuery(function(){
  
      counter = 0;
  
      jQuery('.Artefacto').draggable({
          helper: 'clone',
          containment: '#areaDibujo',
          stop:function(ev, ui) {
              //al arrastrar el primer elemento
              var pos=jQuery(ui.helper).offset();
              objName = "#clonediv"+counter
              jQuery(objName).css({
                  "left":pos.left,
                  "top":pos.top
              });
              jQuery(objName).removeClass("Artefacto");
              //Para elementos existentes en el área
              jQuery(objName).draggable({
                  containment: 'parent',
                  stop:function(ev, ui) {
                      var pos=jQuery(ui.helper).offset();
                  }
              });
          }
      });
  
      jQuery("#areaDibujo").droppable({
          drop: function(ev, ui) {
              if (ui.helper.attr('id').search(/Artefacto[0-9]+/) != -1){
                  counter++;
                  var element=jQuery(ui.draggable).clone();
                  element.addClass("tempclass");
                  jQuery(this).append(element);
                  jQuery(".tempclass").attr("id","clonediv"+counter);
                  jQuery("#clonediv"+counter).removeClass("tempclass");
                  //Get the dynamically item id
                  draggedNumber = ui.helper.attr('id').search(/Artefacto([0-9]+)/)
                  itemDragged = "dragged" + RegExp.$1
                  jQuery("#clonediv"+counter).addClass(itemDragged);
              }
          }
      });
  
  });
  </code></pre>
  
  <p>And the xhtml file is this:</p>
  
  <pre><code>&lt;?xml version='1.0' encoding='UTF-8' ?&gt;
  &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  
  &lt;html xmlns="http://www.w3.org/1999/xhtml"
        xmlns:ui="http://java.sun.com/jsf/facelets"
        xmlns:f="http://java.sun.com/jsf/core"
        xmlns:h="http://java.sun.com/jsf/html"
        xmlns:icecore="http://www.icefaces.org/icefaces/core"
        xmlns:ace="http://www.icefaces.org/icefaces/components"
        xmlns:ice="http://www.icesoft.com/icefaces/component"
        xml:lang="es" lang="es"
        &gt;
      &lt;h:head&gt;
          &lt;link rel="stylesheet" type="text/css" href="css/style.css" /&gt;
          &lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"&gt;&lt;/script&gt;
          &lt;title&gt;Drag and Drop&lt;/title&gt;
          &lt;script type="text/javascript" src="javascript.js"&gt;&lt;/script&gt;
          &lt;!--&lt;link rel="stylesheet" type="text/css" href="./xmlhttp/css/rime/rime.css"/&gt;--&gt;
      &lt;/h:head&gt;
  
      &lt;h:body&gt;
  
          &lt;div id="contenedor"&gt;
              &lt;div id="panelArtefactos"&gt;
                  &lt;h3&gt;Artefactos&lt;/h3&gt;
                  &lt;div id="Artefacto"&gt;
                      &lt;div id="Artefacto1" class="Artefacto" styleClass="ui-widget-content"&gt;Entidad&lt;/div&gt;
                      &lt;br/&gt;
                      &lt;div id="Artefacto1" class="Artefacto"&gt;Claves&lt;/div&gt;
                      &lt;br/&gt;
                      &lt;div id="Artefacto1" class="Artefacto"&gt;Atributos&lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div id="areaDibujo"&gt;
                  AREA DE DIBUJO...
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/h:body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I will be very grateful if you can help me.</p>
  
  <p>P.S.: Sorry if my english don't is correct :$ (shame of me)</p>