Question

我有两个空格，第一个有人工制品系列（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。：对不起，如果我的英语不正确：$（我的耻辱）

Answer 1

我正在使用与您相同的示例，我将其调整为可调整大小！

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

在jQuery中拖放并调整div的大小

1 个答案: