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

问题描述：

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

我试图完成类似这样：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，并设置了我自己的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')  
    });

这太好了。我明白这更好。另外，这与你提到的任何div大小都是兼容的。是否有可能在临时的'.placement'上设置一些覆盖层来表示“放置在这里”？ – 2014-08-28 02:39:07

我更新了JSFIDDLE，并在更大的正方形中添加了淡入/淡出“放在这里”。 – 2014-08-28 02:55:27

完美！我可能需要在jQuery方面进行淡入/淡出 – 2014-08-28 03:06:33

答

更改位置偏移

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

Demo

是的偏移量将光标与代码居中。但它允许新创建的div放在父div之外。 – 2014-08-28 01:50:12

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

相关推荐