Crear div con mouse click

[clarkpler]

Como están amigos del foro, estoy haciendo un pequeño proyecto donde quiero crear Divs de manera visual con la ayuda del mouse, espero que me puedan ayudar. Lo que he pensado es:

-Detectar el clic y guardar las coordenadas de inicio del Div.
-Detectar donde se suelta o nuevamente clic y guarda las coordenadas de cierre de Div.
-Calcular el tamaño del div.
-Crear el div con coordenadas de inicio y tamaño. Mediante css position: absolute.

Esto quería hacerlo con Jquery. Pero me preguntaba si abría alguna función que me facilitase el proceso. Gracias

[madhatterdef]

lo que buscas es un efecto
drag and drop

un ej jquery:

Código:

/**
* EasyDrag 1.4 - Drag & Drop jQuery Plug-in
*
* Thanks for the community that is helping the improvement
* of this little piece of code.
*
* For usage instructions please visit http://fromvega.com
*/

(function($){

    // to track if the mouse button is pressed
    var isMouseDown    = false;

    // to track the current element being dragged
    var currentElement = null;

    // callback holders
    var dropCallbacks = {};
    var dragCallbacks = {};

    // global position records
    var lastMouseX;
    var lastMouseY;
    var lastElemTop;
    var lastElemLeft;
    
    // track element dragStatus
    var dragStatus = {};    

    // returns the mouse (cursor) current position
    $.getMousePosition = function(e){
        var posx = 0;
        var posy = 0;

        if (!e) var e = window.event;

        if (e.pageX || e.pageY) {
            posx = e.pageX;
            posy = e.pageY;
        }
        else if (e.clientX || e.clientY) {
            posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
            posy = e.clientY + document.body.scrollTop  + document.documentElement.scrollTop;
        }

        return { 'x': posx, 'y': posy };
    };

    // updates the position of the current element being dragged
    $.updatePosition = function(e) {
        var pos = $.getMousePosition(e);

        var spanX = (pos.x - lastMouseX);
        var spanY = (pos.y - lastMouseY);

        $(currentElement).css("top",  (lastElemTop + spanY));
        $(currentElement).css("left", (lastElemLeft + spanX));
    };

    // when the mouse is moved while the mouse button is pressed
    $(document).mousemove(function(e){
        if(isMouseDown && dragStatus[currentElement.id] == 'on'){
            // update the position and call the registered function
            $.updatePosition(e);
            if(dragCallbacks[currentElement.id] != undefined){
                dragCallbacks[currentElement.id](e, currentElement);
            }

            return false;
        }
    });

    // when the mouse button is released
    $(document).mouseup(function(e){
        if(isMouseDown && dragStatus[currentElement.id] == 'on'){
            isMouseDown = false;
            if(dropCallbacks[currentElement.id] != undefined){
                dropCallbacks[currentElement.id](e, currentElement);
            }

            return false;
        }
    });

    // register the function to be called while an element is being dragged
    $.fn.ondrag = function(callback){
        return this.each(function(){
            dragCallbacks[this.id] = callback;
        });
    };

    // register the function to be called when an element is dropped
    $.fn.ondrop = function(callback){
        return this.each(function(){
            dropCallbacks[this.id] = callback;
        });
    };
    
    // stop the element dragging feature
    $.fn.dragOff = function(){
        return this.each(function(){
            dragStatus[this.id] = 'off';
        });
    };
    
    
    $.fn.dragOn = function(){
        return this.each(function(){
            dragStatus[this.id] = 'on';
        });
    };

    // set an element as draggable - allowBubbling enables/disables event bubbling
    $.fn.easydrag = function(allowBubbling){

        return this.each(function(){

            // if no id is defined assign a unique one
            if(undefined == this.id || !this.id.length) this.id = "easydrag"+(new Date().getTime());

            // set dragStatus 
            dragStatus[this.id] = "on";
            
            // change the mouse pointer
            $(this).css("cursor", "move");

            // when an element receives a mouse press
            $(this).mousedown(function(e){

                // set it as absolute positioned
                $(this).css("position", "absolute");

                // set z-index
                $(this).css("z-index", "10000");

                // update track variables
                isMouseDown    = true;
                currentElement = this;

                // retrieve positioning properties
                var pos    = $.getMousePosition(e);
                lastMouseX = pos.x;
                lastMouseY = pos.y;

                lastElemTop  = this.offsetTop;
                lastElemLeft = this.offsetLeft;

                $.updatePosition(e);

                return allowBubbling ? true : false;
            });
        });
    };

})(jQuery);

ponelo en

jquery.easydrag.js

y en el html

Código:

<html>
    <head>
    <title>EasyDrag Demo</title>
    <script src="jquery.js" type="text/javascript"></script>
    <script src="jquery.easydrag.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(function(){
        $("#box1").easydrag();
    });
    </script>
    <style type="text/css">
    #box1 {
        font-family: "Trebuchet MS", Tahoma, Verdana;
        background-color: yellow;
        padding: 5px;
        border: 2px solid orange;
        width: 200px;
    }
    </style>
    </head>
    <body>
    <h3>EasyDrag jQuery Plugin </h3>
    <div id="box1">Versi&oacute;n demo de Easy Drag</div>
    </body>
    </html>

[clarkpler]

Esto me serviría para mover el div, pero lo que quiero es crearlo desde cero, como si hiciera un recuadro con el mouse y se convierta en un div.

[MARCASTELEON]

Prueba con este codigo, lo hize en poco tiempo pero talvez te sirva de base para hacer algo mas elaborado.

Código Javascript:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
</head>
<script>
i=0;
flag=0;
 
window.onload=function(event){
    window.onclick=rectangulo;  
    }
function rectangulo(event){
if(flag==0){
var x=event.clientX;
var y=event.clientY;
var div=document.createElement("div");
div.id=i
i++;
div.style.position="absolute";
div.style.zIndex=i;
div.style.left=x+"px";
div.style.top=y+"px";
div.style.backgroundColor="#000";
document.body.appendChild(div);
window.onmousemove=function(event){
div.style.width=(event.clientX-x)+"px";
div.style.height=(event.clientY-y)+"px";
}
flag=1;
}
else{flag=0; window.onmousemove=false;
    }
    }
 
 
</script>
<body>
</body>
</html>
 

Si no entiendes algo o necesitas mas ayuda no dudes en preguntar.

[madhatterdef]

perdón por mi error

[clarkpler]

MARCASTELEON gracias por el código ahora lo estoy adaptando a mis necesidades. Mas bien una pregunta las coordenadas que calcula son respecto al documento, como podría hacer para que sean respecto a un contenedor div. Porque luego quiero almacenarlas para enviarlas a una base de datos. Este es mi código:

Código Javascript:

<script>
$(document).ready(function(){
i=0; 
flag=0;
allcontxt = document.getElementById('AllCont_Texto'); 
allcontxt.onclick=rectangulo;* 
function rectangulo(event){
if(flag==0){ 
var x=event.clientX;
var y=event.clientY;
var div=document.createElement("div");
div.id='Cont_Texto'+i;
i++;
div.style.position="absolute";
div.style.zIndex=82;
div.style.left=x+"px";
div.style.top=y+"px";
div.style.backgroundColor="#000";
allcontxt.appendChild(div);
allcontxt.onmousemove=function(event){
div.style.width=(event.clientX-x)+"px";
div.style.height=(event.clientY-y)+"px";
}
flag=1;
}
else{flag=0; allcontxt.onmousemove=false;
 }
 }
});
 
</script>
 

El único inconveniente es como te decia: las coordenadas son respecto al documento y cuando se traza lo hace dentro de un div, con lo que varia el lugar de trazado.

[clarkpler]

Ya Solucioné el problema; acá dejo el código por si lo necesita alguien; aclaro que está mezclado con Jquery pues aún no conozco muy bien el javascript.

Código Javascript:

<script>
$(document).ready(function(){
i=0; //Valor dinumeracion div inicial
flag=0;
allcontxt = document.getElementById('AllCont_Texto'); 
allcontxt.onclick=rectangulo;* 
 
posicionReal = $("#AllCont_Texto").offset();
var yc=posicionReal.top;
var xc=posicionReal.left;
 
////Funcion que crea divs
//Si no se a dado clic el marcador sera 0; si se da clic será 1
// Si marcado es 0, condicion inicial -> obtenemos las coordenadas del primer click x,y; y creamos el div con posicion absoluta x y y
// Luego activamos la la deteccion de movimiento del mouse y vamos calculando continuamente la posicion para asignar el tamaño al div
// cambiamos el marcador a 1; con lo que al siguiente clic se desactivara la deteccion del movimiento y obtendremos el div final.
function rectangulo(event){
if(flag==0){ 
var x=event.pageX-xc;
var y=event.pageY-yc;
var div=document.createElement("div");
div.id='Cont_Texto'+i;
i++;
div.style.position="absolute";
div.style.zIndex=82;
div.style.left=x+"px";
div.style.top=y+"px";
div.style.backgroundColor="#000";
allcontxt.appendChild(div);
allcontxt.onmousemove=function(event){
div.style.width=(event.pageX-xc-x)+"px";
div.style.height=(event.pageY-yc-y)+"px";
}
flag=1;
}
else{flag=0; allcontxt.onmousemove=false;
* * }
* * }
*});
*
</script>
 

[MARCASTELEON]

siento la tardanza en responder, que bueno que lo has resuelto .

[capa]

Hola MARCASTELEON

excelente la iniciativa y me recode a una de mis inquietudes hace mucho tiempo, como calculas si arrastras el Mouse hacia la izquierda o arriba, tomando el punto de referencia del click del Mouse, bueno lo hice moviendo las coordenadas, abra otro metodo o quizás tengas algunas otra solución?

Saludos.