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