Tengo div que se puede colocar en cualquier lugar dentro de otro div. Puedo hacer esto con el evento jquery mousemove. Sin embargo, no está funcionando del todo. Estoy tratando de que el cursor del mouse esté en el centro del div en movimiento. Configuré estos atributos css en línea con jquery 'top': relY + 30,'left': relX + 10 pero no tuve suerte. Como menciono, estoy tratando de colocar el cursor en el medio del div. El usuario solo puede colocar el movimiento dentro del div padre llamado middle-side empty. JSFIDDLE

Estoy tratando de lograr algo similar a esto: http://jsfiddle.net/Lqebpaov/

Jquery:

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



    $('.middle-side').parent().mousemove(function(e){
        var offset = $(this).offset();
        var relX = e.pageX - offset.left;
        var relY = e.pageY - offset.top;
        $('.placement').css({'top': relY + 30,'left': relX + 10, 'position': 'absolute'});
    })

});

$('.middle-side').on('click', function(e){
    var offset = $(this).offset();
    var relX = e.pageX - offset.left;
    var relY = e.pageY - offset.top;
    $('.placement').css({'top': relY,'left': relX, 'position': 'absolute' });
    $(this).off("mousemove").find('.placement').removeClass('placement')    
});

Html

<div>
    <div class="middle-side empty"></div>
</div>
javascript jquery
0
Code_Ed_Student 28 ago. 2014 a las 05:33

2 respuestas

La mejor respuesta

Esta fue una pregunta divertida. Actualicé mucho su Javascript y configuré mi propio JSFIDDLE. Con esta configuración, debería poder cambiar el tamaño de los cuadros a cualquier combinación de alto / ancho y funcionará como se esperaba. Puede consultar el enlace JSFIDDLE, pero aquí también está el Javascript actualizado:

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



        $('.middle-side').parent().mousemove(function(e){
            var offset = $(this).offset(),
                relX = e.pageX,
                relY = e.pageY,
                $dvPlacement = $('.placement'),
                pWidth = $dvPlacement.outerWidth(),
                pHeight = $dvPlacement.outerHeight(),
                $dvOutBox = $('.middle-side'),
                oWidth = $dvOutBox.outerWidth(),
                oHeight = $dvOutBox.outerHeight(),
                centerY = relY - pHeight / 2,
                centerX = relX - pWidth / 2,
                topBorder = $dvOutBox.offset().top,
                bottomBorder = $dvOutBox.offset().top + oHeight,
                leftBorder = $dvOutBox.offset().left,
                rightBorder = $dvOutBox.offset().left + oWidth;

            $dvPlacement.css({'top': centerY + pHeight > bottomBorder ? bottomBorder - pHeight :
                                      centerY < topBorder ? topBorder :
                                      centerY,
                              'left': centerX + pWidth > rightBorder ? rightBorder - pWidth : 
                                      centerX < leftBorder ? leftBorder :
                                      centerX,
                              'position': 'absolute'
                             });
        })

    });

    $('.middle-side').on('click', function(e){            
        $(this).off("mousemove").find('.placement').removeClass('placement')    
    });
2
Travis Wolfe 28 ago. 2014 a las 02:39

Cambiar el desplazamiento de ubicación a

$('.placement').css({'top': relY + 30,'left': relX - 75 , 'position': 'absolute'});

Demo

1
Jon P 28 ago. 2014 a las 01:48

Preguntas relacionadas

27 Usando jQuery para centrar un DIV en la pantalla
5 ¿Cómo obtengo la posición absoluta de un clic del mouse de un evento onClick en el cuerpo?
2 jQuery hover sobre la imagen funciona bien en una dirección, saltar en la otra

Nuevas preguntas

1 Mecanografiado: un mapa de claves de diferentes enumeraciones arroja un error
1 Usando JSON Array con AJAX
1 La transición de CSS no funciona en la representación condicional en React
2 Javascript crea DIV con var dentro
1 Cree un sistema para agregar etiquetas de productos en Javascript
3 Obteniendo una matriz indefinida después de .map ()
2 mapa de matriz de objeto Restful API con Hapi
1 ¿Por qué d3.domain () tiene solo un elemento cuando utilizo toda la matriz de datos como dominio?
1 Todos los valores son verdaderos, aunque los valores se han cambiado
1 Chartjs: las leyendas ocupan demasiado espacio en los dispositivos móviles
Nuevas preguntas con la etiqueta javascript >

javascript

Para preguntas sobre la programación en ECMAScript (JavaScript / JS) y sus diversos dialectos / implementaciones (excepto ActionScript). Incluya todas las etiquetas relevantes en su pregunta; por ejemplo, [node.js], [jquery], [json], etc.

Más sobre javascript...