在jQuery中拖放和調整div的大小

我有兩個空格，第一個有artefacts serie（divs），第二個是工作區，其中從第一個空間拖出的工件可以新拖放，調整大小，在這些之間加入。目前，我可以（在Web上工作一個示例）拖動這些工件並將它放到工作區域，在那裏我可以拖放新的這個工件，但是我無法調整它。說實話，我沒有試圖在文物之間進行聯合，但是如果你對我說任何想法，都會對我很有幫助。，我有代碼：在jQuery中拖放和調整div的大小

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); 
      } 
     } 
    }); 

});

而XHTML文件是這樣的：

<?xml version='1.0' encoding='UTF-8' ?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<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" 
     > 
    <h:head> 
     <link rel="stylesheet" type="text/css" href="css/style.css" /> 
     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> 
     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script> 
     <title>Drag and Drop</title> 
     <script type="text/javascript" src="javascript.js"></script> 
     <!--<link rel="stylesheet" type="text/css" href="./xmlhttp/css/rime/rime.css"/>--> 
    </h:head> 

    <h:body> 

     <div id="contenedor"> 
      <div id="panelArtefactos"> 
       <h3>Artefactos</h3> 
       <div id="Artefacto"> 
        <div id="Artefacto1" class="Artefacto" styleClass="ui-widget-content">Entidad</div> 
        <br/> 
        <div id="Artefacto1" class="Artefacto">Claves</div> 
        <br/> 
        <div id="Artefacto1" class="Artefacto">Atributos</div> 
       </div> 
      </div> 

      <div id="areaDibujo"> 
       AREA DE DIBUJO... 
      </div> 
     </div> 
    </h:body> 
</html>

我會很感激，如果你能幫助我。

P.S：很抱歉，如果我的英語不正確的是：$（我的恥辱）

來源

2011-03-21 Mary

我使用的是同樣的例子，你和我做了調整大小！

var element=$(ui.draggable).clone(); 
element.addClass("tempclass"); 
$(element).resizable({ 
    helper: "ui-resizable-helper" 
});     
$(this).append(element);

我使用助手只是爲了顯示我的新大小的邊框。
CSS很簡單：

.ui-resizable-helper { 
    border: 2px dotted #00F; 
}

來源

2012-05-29 09:00:44 jwood

在jQuery中拖放和調整div的大小

回答

相關問題