Question

我有div可以放在另一个div的任何地方。我可以用jquery mousemove事件做到这一点。但它不是很有效。我试图让鼠标光标位于移动div的中心。我将这些css属性与jquery 'top': relY + 30,'left': relX + 10内联设置，但没有运气。提到我试图将光标放在div的中间。用户只能将移动放置在名为middle-side empty的父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')    
    });

Answer 2

将展示位置偏移更改为

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

Demo

将光标放在子div的中心 - mousemove事件

2 个答案: