在鼠標位置

jQuery的UI可拖動拖我有這樣的代碼：在鼠標位置

<!doctype html> 
<html lang="en"> 

<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>jQuery UI Draggable - Default functionality</title> 
    <style> 
     #draggable { 
      width: 150px; 
      height: 150px; 
      padding: 0.5em; 
      border: 1px solid red; 
     } 

     .container { 
      height: 500px; 
      width: 500px; 
      border: 1px solid green; 
      transform: scale(1.6); 
      position: relative; 
      left: 300px; 
      top: 150px; 
     } 
    </style> 
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
    <script> 
     $(function() { 
      $("#draggable").draggable(); 
     }); 
    </script> 
</head> 

<body> 
    <div class="container"> 
     <div id="draggable" class="ui-widget-content"> 
      <p>Drag me around</p> 
     </div> 
    </div> 




</body> 

</html>

它的工作原理完美無transform: scale(1.6);。但是，#draggable的移動速度比使用transform屬性的鼠標快。我怎樣才能使它拖曳並將容器縮放到像1.65這樣的值？有什麼可拖動的選項我應該使用？

來源

2017-07-25 Sam Ziggler

這可以通過調整transform: scale(1.6)來解決。當物品被拖動時，它使用它的position來調整拖動項目的top和left。使用scale()時，這些值將關閉，您將看到項目移動的移動速度與鼠標相同。

x1 = x * 1.6; y1 = y * 1.6;

爲了用鼠標移動，我們需要調整該回同一1：1（而不是1：1.6）的比例。這可以像這樣做：

的jQuery>可拖動>拖動選項

drag: function(e, ui) { 
    // Adjust for Scale 
    var myScale = parseFloat($('.container').css('transform').split(',')[3]); 
    var myTop = Math.round(ui.position.top/myScale); 
    var myLeft = Math.round(ui.position.left/myScale); 
    ui.position = { 
    top: myTop, 
    left: myLeft 
    }; 
}

僅供參考，$('.container').css('transform')將返回：matrix(1.6, 0, 0, 1.6, 0, 0)。查看更多：Get CSS transform property with jQuery

您可以將代碼1.6硬編碼到您的腳本中，但我喜歡將事情保持便攜。所以如果你改變CSS，你不必改變這個腳本。查看更多有關設定位置：http://api.jqueryui.com/draggable/#event-drag

工作實例：https://jsfiddle.net/Twisty/1gnehyum/

來源

2017-07-25 23:35:08 Twisty

非常感謝好友@Twisty，完善工作 –

回答

相關問題