拖放旋轉圖像 javascript
[英]Drag and drop rotated images javascript
問題描述
所以我有一個代碼可以讓我拖放一個 img 標簽。 拖放工作正常，但是當我添加旋轉 function 時，拖放開始表現得很奇怪（坐標改變，當我拖動元素時旋轉重置）。 另外，當我再次嘗試拖動時，它會回到最初的 position，請問您知道我該如何解決這個問題嗎？
這是我的代碼，在此先感謝您：
let rotate=0 function rot_plus() { rotate=rotate+10 $("#test").css('transform',"rotate("+rotate+"deg)") } function rot_minus() { rotate=rotate-10 $("#test").css('transform',"rotate("+rotate+"deg)") } var active = false; var currentX; var currentY; var initialX; var initialY; var xOffset = 0; var yOffset = 0; let current_elem var container = document.querySelector("#boite"); container.addEventListener("mousedown", dragStart, false); container.addEventListener("mouseup", dragEnd, false); container.addEventListener("mousemove", drag, false); function dragStart(e) { if(e.target.id=="test"){ dragItem1=e.target.id dragItem = document.querySelector("#"+e.target.id); initialX=e.clientX-xOffset initialY=e.clientY-yOffset active = true; } } function drag(e) { if (active) { e.preventDefault(); currentX = e.clientX - initialX; currentY = e.clientY - initialY; xOffset = currentX; yOffset = currentY; setTranslate(currentX, currentY, dragItem); } } function dragEnd(e) { active = false; initialX=currentX initialY=currentY selectedElement = null; } function setTranslate(xPos, yPos, el) { el.style.transform = "translate3d(" + xPos + "px, " + yPos + "px, 0) rotate("+rotate+"deg)"; }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1:0"> <title>Document</title> <script src="https.//cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min:js" integrity="sha512-STof4xm1wgkfm7heWqFJVn58Hm3EtS31XFaagaa8VMReCXAkQnJZ+jEy8PCC/iT18dFy95WcExNHFTqLyp72eQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> </head> <body> <div id="boite"> <img src="https.//static.vecteezy.com/system/resources/previews/009/342/282/original/cartoon-eyes-clipart-design-illustration-free-png:png" id="test" class="remove" style="position; absolute: width;150px: height:auto" > <svg xmlns="http.//www.w3:org/2000/svg" width="46" height="46" fill="currentColor" class="bi bi-plus-circle" id="rotplus" style="margin-top.120px" onclick="rot_plus()" viewBox="0 0 16 16"> <path fill-rule="evenodd" d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1.908-.417A6 6 0 1 1 8 2v1z"/> <path d="M8 4.466V.534a.25.25 0 0 1.41-.192l2.36 1.966c.12.1.12.284 0.384L8.41 4.658A.25.25 0 0 1 8 4:466z"/> </svg> <svg xmlns="http.//www.w3:org/2000/svg"width="46" height="46" fill="currentColor" class="bi bi-dash-circle" id="rotminus" style="margin-top.120px" onclick="rot_minus()" viewBox="0 0 16 16"> <path fill-rule="evenodd" d="M8 3a5 5 0 1 1-4.546 2.914.5.5 0 0 0-.908-.417A6 6 0 1 0 8 2v1z"/> <path d="M8 4.466V.534a.25.25 0 0 0-.41-.192L5.23 2.308a.25.25 0 0 0 0.384l2.36 1.966A.25.25 0 0 0 8 4.466z"/> </svg> </div> </body> </html>
1 個解決方案
解決方案1
1 已采納 2023-01-07 03:30:50
您正在使用 $.css 來更改旋轉函數中的變換。 但這消除了位置變化，因為兩者都在“轉換”中定義。 也就是說，要解決此問題，您需要在旋轉時保留 position 信息。
為此，最好不要使用 jquery，因為它會清除轉換中的信息。 所以我所做的只是復制您定義 position 的行，而不是采用 function 中定義的位置，我直接從您存儲值的變量中獲取它。
我還使用了 CSS 來防止拖動時選擇項目：
CSS：
#boite,
#boite * {
user-select: none;
}
記者：
function rot_plus() {
const el = lastItemDragged
rotate = rotate + 10;
el.style.transform = "translate3d(" + xOffset + "px, " + yOffset + "px, 0) rotate(" + rotate + "deg)";
}
function rot_minus() {
const el = lastItemDragged
rotate = rotate - 10;
el.style.transform = "translate3d(" + xOffset + "px, " + yOffset + "px, 0) rotate(" + rotate + "deg)";
}
function setTranslate(el) {
el.style.transform = "translate3d(" + xOffset + "px, " + yOffset + "px, 0) rotate(" + rotate + "deg)";
}
我還添加了變量 lastItemDragged 來存儲最后拖動的項目（以便旋轉達到相同）
完整代碼：
let rotate = 0 function rot_plus() { const el = lastItemDragged rotate = rotate + 10; el.style.transform = "translate3d(" + xOffset + "px, " + yOffset + "px, 0) rotate(" + rotate + "deg)"; } function rot_minus() { const el = lastItemDragged rotate = rotate - 10; el.style.transform = "translate3d(" + xOffset + "px, " + yOffset + "px, 0) rotate(" + rotate + "deg)"; } var lastItemDragged = document.querySelector('#test') var active = false; var currentX; var currentY; var initialX; var initialY; var xOffset = 0; var yOffset = 0; let current_elem var container = document.querySelector("#boite"); container.addEventListener("mousedown", dragStart, false); container.addEventListener("mouseup", dragEnd, false); container.addEventListener("mousemove", drag, false); function dragStart(e) { if (e.target.id == "test") { dragItem1 = e.target.id dragItem = document.querySelector("#" + e.target.id); initialX = e.clientX - xOffset initialY = e.clientY - yOffset active = true; } } function drag(e) { if (active) { e.preventDefault(); currentX = e.clientX - initialX; currentY = e.clientY - initialY; xOffset = currentX; yOffset = currentY; setTranslate(dragItem); } } function dragEnd(e) { active = false; initialX = currentX initialY = currentY selectedElement = null; } function setTranslate(el) { el.style.transform = "translate3d(" + xOffset + "px, " + yOffset + "px, 0) rotate(" + rotate + "deg)"; }
#boite, #boite * { user-select: none; }
<div id="boite"> <img src="https://static.vecteezy.com/system/resources/previews/009/342/282/original/cartoon-eyes-clipart-design-illustration-free-png.png" id="test" class="remove" style="position: absolute; width:150px; height:auto"> <svg xmlns="http://www.w3.org/2000/svg" width="46" height="46" fill="currentColor" class="bi bi-plus-circle" id="rotplus" style="margin-top:120px" onclick="rot_plus()" viewBox="0 0 16 16"> <path fill-rule="evenodd" d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1.908-.417A6 6 0 1 1 8 2v1z" /> <path d="M8 4.466V.534a.25.25 0 0 1.41-.192l2.36 1.966c.12.1.12.284 0.384L8.41 4.658A.25.25 0 0 1 8 4.466z" /> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="46" height="46" fill="currentColor" class="bi bi-dash-circle" id="rotminus" style="margin-top:120px" onclick="rot_minus()" viewBox="0 0 16 16"> <path fill-rule="evenodd" d="M8 3a5 5 0 1 1-4.546 2.914.5.5 0 0 0-.908-.417A6 6 0 1 0 8 2v1z" /> <path d="M8 4.466V.534a.25.25 0 0 0-.41-.192L5.23 2.308a.25.25 0 0 0 0.384l2.36 1.966A.25.25 0 0 0 8 4.466z" /> </svg> </div>
拖放HTML5圖片並添加一些JavaScript
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.