перетащите и измените размер div в jQuery

У меня есть два пространства: в первом есть серия артефактов (divs), а во втором — рабочая область, в которой артефакты, перетащенные из первого пространства, можно перетаскивать, изменять размер и соединять между собой. На данный момент я могу (работая над примером в Интернете) перетаскивать артефакты и помещать их в рабочую область, где я могу перетаскивать этот артефакт заново, но я не могу изменить его размер. Честно говоря, я не пытался соединить артефакты, но мне было бы очень полезно, если бы вы сказали мне, как это сделать. Код, который у меня есть:

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.: Извините, если мой английский не правильный :$ (мне стыдно)


jquery drag resize
person Mary    schedule 21.03.2011    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Я использую тот же пример, что и вы, и я сделал его изменяемым!

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

Я использую helper только для того, чтобы показать границы моего нового размера.
CSS прост:

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