javascript - 将光标置于子 div 的中心 - mousemove 事件

Question

我有一个 div，可以放置在另一个 div 内的任何位置。我可以使用 jquery mousemove 事件来做到这一点。然而它并不太有效。我试图让鼠标光标位于移动 div 的中心。我将这些 css 属性设置为与 jquery 'top': relY + 30,'left': relX + 10 内联，但没有运气。如前所述，我试图将光标置于 div 中间。用户只能将移动放置在称为middle-sideempty的父div内。 JSFIDDLE

我正在尝试完成类似的事情: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>

Answer 1

这是一个有趣的问题。我更新了很多你的Javascript，并设置了我自己的JSFIDDLE 。通过此设置，您应该能够将框的大小调整为任何高度/宽度组合，并且它将按预期工作。您可以查看JSFIDDLE link ，但这里还有更新的 Javascript:

    $('#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')    
    });