Crear div con mouse click

[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>