Con un clic en el botón, puedo generar divs arrastrables que luego se colocan dentro de otro div (contenedor). Los divs que se crean con el clic del botón se colocan automáticamente en el lado izquierdo del div padre (contenedor). Entonces el usuario tiene la capacidad de arrastrarlo a la ubicación deseada. ¿Hay alguna manera de permitir que el usuario genere el nuevo div y luego les permita determinar la ubicación de este nuevo div con un clic del mouse? JSFIDDLE

A medida que el usuario descifra la ubicación y se desplaza por el contenedor, proporcione algún tipo de guía temporal como esta a continuación:

enter image description here

Jquery

$('#button').click(function (e) {
    $('<div />', {
        'class': 'draggable ui-widget-content',
        text: $('textarea').val(),
        appendTo: '.middle-side',
        draggable: {
            containment: 'parent'
        }
    });
});

Html

<textarea rows="4" cols="50" placeholder="Enter Text Here!"></textarea>
<br/>
<input type="button" id="button" value="Add Div with Text" />
<br/>
<div>
    <div class="middle-side"></div>
</div>
0
Code_Ed_Student 28 ago. 2014 a las 00:18

3 respuestas

La mejor respuesta

Esto es de lo que estaba hablando:

Dos opciones:

Al mover el mouse sobre el div:

http://jsfiddle.net/Lqebpaov/

document.getElementById('parentDiv').addEventListener('mouseover', function(event) {
    var child = document.getElementById('childDiv');
    var mouseX = event.clientX || event.pageX;
    var mouseY = event.clientY || event.pageY;
    var top = mouseY - 50;
    var left = mouseX - 50;
    child.style.top = top.toString()+"px";
    child.style.left = left.toString()+"px";
});

Al hacer clic, visualice el div: http://jsfiddle.net/7s2mykr9/

document.getElementById('parentDiv').addEventListener('click', function(event) {
    var child = document.getElementById('childDiv');
    var mouseX = event.clientX || event.pageX;
    var mouseY = event.clientY || event.pageY;
    var top = mouseY - 50;
    var left = mouseX - 50;
    child.style.top = top.toString()+"px";
    child.style.left = left.toString()+"px";
    child.style.visibility = "visible";
});

El código está ahí, solo limpia las matemáticas.

Espero que ayude

0
Fer 27 ago. 2014 a las 20:46

¿Es esto lo que estas tratando de hacer?

$('.middle-side').on('click',function (e) {
var x = (e.pageX -this.offsetLeft)+'px', y=(e.pageY -this.offsetTop) +'px';
$('<div />', {
    'class': 'draggable ui-widget-content',
    text: $('textarea').val(),
    appendTo: '.middle-side',
    draggable: {
        containment: 'parent'
    }
}).css({
    "position" : "absolute",
    "top" : y,
    "left" : x
});
});

Agregué esto a la css:

.middle-side {position:relative;}

Vea el violín

0
Gary Storey 27 ago. 2014 a las 20:55

Este ejemplo creará un div cuando su mouse entre en el div. Cuando hace clic en el nuevo div, puede moverlo y cuando suelta el mouse, el div permanecerá donde lo dejó. Luego puede levantarlo y moverlo tantas veces como desee.

<!DOCTYPE html>
<html>
<head>
<title>example</title>
<style>
    #testArea{
        display:block;
        height:200px;
        width:200px;
        border:1px solid black;
    }
    #testArea div{
        position:relative;
        display:block;
        background:green;
        height:20px;
        width:100px;
    }
</style>
</head>
<body>
    <div id="mousePosition"></div>
    <div id="dragState">Drag state false</div>
    <div id="testArea"></div>

<script>
    var dragging=false;
    document.getElementById("testArea").addEventListener("mouseover",function(){
        if(!this.firstElementChild&&!this.firstChild){
            var newDiv = document.createElement("div");
            newDiv.innerHTML="Hello World";
            newDiv.addEventListener("mousedown",function(e){
                this.style.background="red";
                dragging=true;
                document.getElementById("dragState").innerHTML="Drag state true";
            },false);
            document.addEventListener("mousemove",function(e){
                document.getElementById("mousePosition").innerHTML="X: "+e.clientX+" Y: "+e.clientY;
                if(dragging){
                    var rect = document.getElementById("testArea").getBoundingClientRect();
                    newDiv.style.top = e.clientY-rect.top+"px";
                    newDiv.style.left = e.clientX-rect.left+"px";
                }
            },false);
            document.addEventListener("mouseup",function(e){
                newDiv.style.background="green";
                dragging=false;
                document.getElementById("dragState").innerHTML="Drag state false";
            },false);

            this.appendChild(newDiv);
        }

    },false);

</script>
</body>
</html>
0
Patrick W. McMahon 27 ago. 2014 a las 20:58