Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <head>
- <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
- <title>Drag</title>
- <style>
- .main-container {
- background-color: #cacaca;
- width: 70%;
- height: 98vh;
- border-radius: 7px;
- position: relative;
- float: left;
- }
- #container {
- width: 80%;
- height: 100vh;
- display: flex;
- align-items: center;
- justify-content: center;
- overflow: hidden;
- border-radius: 7px;
- touch-action: none;
- position: absolute;
- z-index: 1
- }
- #container span {
- width: 30px;
- height: 30px;
- background-color: rgb(245, 230, 99);
- border: 2px solid rgba(0,0,0, .5);
- border-radius: 50%;
- touch-action: none;
- user-select: none;
- font-weight: 700;
- text-align: center;
- font-size: 25px;
- margin-left: 2px;
- }
- #container span:active {
- background-color: rgba(0,100,100, 1.00);
- }
- img {
- margin: 10px;
- }
- .sidebar {
- width: 29%;
- position: relative;
- float: right;
- }
- .sidebar input[type="text"] {
- width: 20%;
- }
- .sidebar input {
- margin-bottom: 10%;
- }
- .sidebar label {
- font-weight: 700;
- }
- </style>
- </head>
- <body>
- <div class="main-container">
- <div id="outerContainer">
- <div id="container">
- <!--<span id="item">1</span>-->
- </div>
- </div>
- <img id="output">
- <script>
- var loadFile = function(event) {
- var reader = new FileReader();
- reader.onload = function(){
- var output = document.getElementById('output');
- output.src = reader.result;
- };
- reader.readAsDataURL(event.target.files[0]);
- };
- </script>
- </div>
- <div class="sidebar">
- <h1>Dodawanie elementów</h1>
- <label>Dodaj obraz:
- <input type="file" accept="image/*" onchange="loadFile(event)"> </label> <br/>
- <label>Wpisz ilość śrubek:
- <input type="text" name="lsrubki" value="" id="ilosc"> </label>
- <button onclick="ilosc()">Dodaj</button>
- </div>
- <script>
- function ilosc(){
- var ilosc = document.getElementById("ilosc").value;
- for(var i = 1; i <= ilosc; i++) {
- const element1 = document.createElement("span");
- element1.id = "item"+i;
- element1.className = "item";
- element1.innerText = i;
- const div = document.querySelector("#container");
- div.appendChild(element1);
- var dragItem = document.querySelector("#item");
- var container = document.querySelector("#container");
- var active = false;
- var currentX;
- var currentY;
- var initialX;
- var initialY;
- var xOffset = 0;
- var yOffset = 0;
- }
- var items = document.querySelectorAll(".item");
- items.forEach(function(item) {
- item.addEventListener("touchstart", dragStart, false);
- item.addEventListener("touchend", dragEnd, false);
- item.addEventListener("touchmove", drag, false);
- item.addEventListener("mousedown", dragStart, false);
- item.addEventListener("mouseup", dragEnd, false);
- item.addEventListener("mousemove", drag, false);
- })
- function dragStart(e) {
- if (e.type === "touchstart") {
- initialX = e.touches[0].clientX - xOffset;
- initialY = e.touches[0].clientY - yOffset;
- } else {
- initialX = e.clientX - xOffset;
- initialY = e.clientY - yOffset;
- }
- if (e.target === this) {
- active = true;
- }
- }
- function dragEnd(e) {
- console.log(e)
- initialX = currentX;
- initialY = currentY;
- active = false;
- }
- function drag(e) {
- if (active) {
- e.preventDefault();
- if (e.type === "touchmove") {
- currentX = e.touches[0].clientX - initialX;
- currentY = e.touches[0].clientY - initialY;
- } else {
- currentX = e.clientX - initialX;
- currentY = e.clientY - initialY;
- }
- xOffset = currentX;
- yOffset = currentY;
- setTranslate(currentX, currentY, this);
- }
- }
- function setTranslate(xPos, yPos, el) {
- el.style.transform = "translate3d(" + xPos + "px, " + yPos + "px, 0)";
- }
- }
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement