时间戳

首页 > 解决方案 > 用户选择重置后图像位置出现问题

javascript - 用户选择重置后图像位置出现问题

问题描述

我有一些图像资产（本例中的文件夹），我可以在其中拖动，然后使用“重置”按钮基本上清理它们。但是，在您重置位置并再次尝试拖动后，它会一直回到您之前拖动它的位置？奇怪吧？？？任何帮助是极大的赞赏！

再次，寻求解决：

  1. 让用户拖动文件夹/图像

  2. 让用户重置/清理

  3. 让用户再次拖动，但从“重置”开始

"use strict";

// Reset Folder position on Clean Up

$(".reset-position").click(function () {
  // Reset position
  $(".resize-drag").removeAttr("style").css("transition", ".5s");
  setTimeout(function () {
    $(".resize-drag").removeAttr("style");
  }, 600);
});


interact(".resize-drag")
  .draggable({
    onmove: window.dragMoveListener,
  })
  .resizable({
    preserveAspectRatio: false,
    edges: { left: false, right: false, bottom: false, top: false },
  })
  .on("resizemove", function (event) {
    var target = event.target,
      x = parseFloat(target.getAttribute("data-x")) || 0,
      y = parseFloat(target.getAttribute("data-y")) || 0;

    // update the element's style
    target.style.width = event.rect.width + "px";
    target.style.height = event.rect.height + "px";

    // translate when resizing from top or left edges
    x += event.deltaRect.left;
    y += event.deltaRect.top;

    target.style.webkitTransform = target.style.transform =
      "translate(" + x + "px," + y + "px)";

    target.setAttribute("data-x", x);
    target.setAttribute("data-y", y);
    target.textContent = event.rect.width + "×" + event.rect.height;
  });

function dragMoveListener(event) {
  var target = event.target,
    // keep the dragged position in the data-x/data-y attributes
    x = (parseFloat(target.getAttribute("data-x")) || 0) + event.dx,
    y = (parseFloat(target.getAttribute("data-y")) || 0) + event.dy;

  // translate the element
  target.style.webkitTransform = target.style.transform =
    "translate(" + x + "px, " + y + "px)";

  // update the posiion attributes
  target.setAttribute("data-x", x);
  target.setAttribute("data-y", y);
}
:root {
  --font-color: #000;
  --font-size: 13px;
}
html,
body {
  overflow: hidden;
  background:white;
}
p {
  font-size: var(--font-size);
  text-align: center;
  padding-top: 5px;
  color: var(--font-color) !important;
}
.folder-container-1 {
  width: 82px;
  position: absolute;
  right: 30px;
  top: 10%;
  cursor: pointer;
}
#folders {
  width: 82px;
  display: flex;
  align-content: center;
  justify-content: center;
}
#folders:active {
  opacity: 0.7;
  transform: rotate(4deg);
  background: rgba(0, 0, 0, 0.5);
  border-radius: 4px;
  border: 1px solid grey;
}
.resize-drag {
  box-sizing: border-box;
  touch-action: none !important;
  user-select: none !important;
}
.resize-container {
  width: 100%;
  height: 240px;
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <title>Folder Reset Position</title>
    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
    
    <link rel="stylesheet" href="/style.css" />
</head>
<body>
    <div class="folder-container-1">
        <div class="folder-1 resize-drag projects-folder" data-target="#myProjects">
            <img src="https://i.ibb.co/C2W4qR0/folder.png" id="folders" title="folder" alt="folder" />
            <p>Folder 1</p>
        </div>
        <div class="folder-1 resize-drag components-folder" data-target="#myComponents">
            <img src="https://i.ibb.co/C2W4qR0/folder.png" id="folders" title="folder" alt="folder" />
            <p>Folder 2</p>
        </div>
        <div class="folder-1 resize-drag about-folder" data-target="#aboutMe">
            <img src="https://i.ibb.co/C2W4qR0/folder.png" id="folders" title="folder" alt="folder" />
            <p>Folder 3</p>
        </div>
        <button class="reset-position">Reset</button>
    </div>

</body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/interact.js/1.2.6/interact.min.js"></script>
    <script src="/script.js"></script>
    <script src="/drag.js"></script>
</html>

标签： javascripthtmlcss

解决方案

即使重置后，您的 data-x/data-y 属性仍然附加到可拖动对象。尝试删除它，它应该可以正常工作。我不太确定为什么需要 setTimeout 来删除样式属性。我添加了一个额外的语句来删除 data-x 和 data-y。也许您可以将其清理为单个语句

$(".reset-position").click(function () {
 // Reset position
 $(".resize-drag").removeAttr("style").css("transition", ".5s");
 $(".resize-drag").removeAttr('data-x data-y');
 setTimeout(function () {
   $(".resize-drag").removeAttr("style");
 }, 600);
});

推荐阅读