Having issue's on image position after user selects reset

user_15146622 0
Viewed 34

I have some image assets (folders in this example), where I can drag around and then use the "reset" button to essentially clean them up. However, after you reset the positions and try to drag again, it takes you all the way back to where you dragged it previously? Odd right??? Any help is greatly appreciated!

Again, looking to just solve for:

  1. Let the user drag a folder/image

  2. Let the user reset/clean-up

  3. Let the user drag again, but starting from "reset"

"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>

css html javascript
1 Answers

You have the data-x/data-y attribute still attached to the draggable even after reset. Try removing that and it should work fine. I'm quite not sure why you need setTimeout to remove the style attribute though. I have added an extra statement to remove data-x and data-y. Maybe you can clean that up to a single statement

$(".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);
});
user_142670600
Related