如何在使用 jquery 拖動元素時旋轉框 div
[英]How to rotate a box div while dragging an element using jquery
問題描述
我知道我們需要使用transform: rotate(ndeg); 為了旋轉 CSS 中的特定元素。 在這種情況下，我想動態地做。 使用 jQuery，當用戶按照用戶的意願將手柄（紅色背景）拖動n度時，我想旋轉盒子/容器 div。 jQuery 有可能嗎？
body { padding: 50px; }.box_element { border: 1px solid black; width: 200px; height: 200px; position: relative; z-index: -1; }.handle { position: absolute; bottom: -10px; right: -10px; width: 10px; height: 10px; border: 1px solid; background: red; z-index: 10; }
<body> <div class="box_element"> THIS IS TEST <div class="handle"></div> </div> </body>
2 個解決方案
解決方案1
2 2019-11-08 05:36:17
您可以使用css 變量，然后在單擊時更改變量的值。
const box_element = document.getElementById('box_element'); const handle = document.getElementById('handle'); handle.addEventListener('click', function() { let currentVal = getComputedStyle(box_element).getPropertyValue('--rotate_deg'); box_element.style.setProperty( '--rotate_deg', ((parseInt(currentVal.replace('deg', '')) + 90) % 360) + 'deg'); });
:root { --rotate_deg: 0deg; }.box_element { margin: 1em; border: 1px solid black; width: 100px; height: 100px; position: relative; z-index: -1; transform: rotate(var(--rotate_deg)) }.handle { position: absolute; bottom: -10px; right: -10px; width: 10px; height: 10px; border: 1px solid; background: red; z-index: 10; cursor: pointer; }
<div class="box_element" id="box_element"> THIS IS TEST <div class="handle" id="handle"></div> </div>
解決方案2
1 已采納 2019-11-08 07:01:49
在這里您需要編寫一些代碼才能使其成為可能，請嘗試實時代碼https://codepen.io/libin-prasanth/pen/xxxzbLg
var stop, active = false, angle = 0, rotation = 0, startAngle = 0, center = { x: 0, y: 0 }, R2D = 180 / Math.PI; function start(e) { e.preventDefault(); var bb = this.getBoundingClientRect(), t = bb.top, l = bb.left, h = bb.height, w = bb.width, x, y; center = { x: l + w / 2, y: t + h / 2 }; x = e.clientX - center.x; y = e.clientY - center.y; startAngle = R2D * Math.atan2(y, x); return (active = true); } function rotate(e) { e.preventDefault(); var x = e.clientX - center.x, y = e.clientY - center.y, d = R2D * Math.atan2(y, x); rotation = d - startAngle; return (rot.style.webkitTransform = "rotate(" + (angle + rotation) + "deg)"); } function stop() { angle += rotation; return (active = false); } rot = document.getElementById("draggable"); rot.addEventListener("mousedown", start, false); window.addEventListener("mousemove", function(event) { if (active === true) { event.preventDefault(); rotate(event); } }); window.addEventListener("mouseup", function(event) { event.preventDefault(); stop(event); });
#draggable { left: 50px; top: 50px; width: 100px; height: 100px; position: relative; border: 1px solid #000; } #draggable:before{ content: ""; position: absolute; bottom: -5px; right: -5px; width: 10px; height: 10px; background: #f00; }
<div id="draggable"> </div>
jQuery在拖動時使用右鍵單擊旋轉div
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.