將光標置於子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>

來源

2014-08-28 Code_Ed_Student

這是一個有趣的問題。我更新了很多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')  
    });

來源

2014-08-28 02:33:46

這太好了。我明白這更好。另外，這與你提到的任何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

來源

2014-08-28 01:48:17

是的偏移量將光標與代碼居中。但它允許新創建的div放在父div之外。 – 2014-08-28 01:50:12

將光標置於子div的中心 - mousemove事件

回答

相關問題