SHARE
TWEET

Untitled

a guest Oct 31st, 2018 212 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
  6.     <title>Drag</title>
  7.     <style>
  8.         .main-container {
  9.           background-color: #cacaca;
  10.           width: 70%;
  11.           height: 98vh;
  12.           border-radius: 7px;
  13.           position: relative;
  14.           float: left;
  15.         }
  16.  
  17.         #container {
  18.             width: 80%;
  19.             height: 100vh;
  20.             display: flex;
  21.             align-items: center;
  22.             justify-content: center;
  23.             overflow: hidden;
  24.             border-radius: 7px;
  25.             touch-action: none;
  26.             position: absolute;
  27.             z-index: 1
  28.         }
  29.  
  30.         #container span {
  31.             width: 30px;
  32.             height: 30px;
  33.             background-color: rgb(245, 230, 99);
  34.             border: 2px solid rgba(0,0,0, .5);
  35.             border-radius: 50%;
  36.             touch-action: none;
  37.             user-select: none;
  38.             font-weight: 700;
  39.             text-align: center;
  40.             font-size: 25px;
  41.             margin-left: 2px;
  42.         }
  43.  
  44.         #container span:active {
  45.             background-color: rgba(0,100,100, 1.00);
  46.         }
  47.  
  48.         img {
  49.           margin: 10px;
  50.         }
  51.  
  52.         .sidebar {
  53.             width: 29%;
  54.             position: relative;
  55.             float: right;
  56.         }
  57.  
  58.         .sidebar input[type="text"] {
  59.             width: 20%;
  60.         }
  61.  
  62.         .sidebar input {
  63.             margin-bottom: 10%;
  64.         }
  65.  
  66.         .sidebar label {
  67.             font-weight: 700;
  68.         }
  69.     </style>
  70. </head>
  71.  
  72. <body>
  73.     <div class="main-container">
  74.         <div id="outerContainer">
  75.             <div id="container">
  76.                 <!--<span id="item">1</span>-->
  77.             </div>
  78.         </div>
  79.        
  80.         <img id="output">
  81.         <script>
  82.             var loadFile = function(event) {
  83.               var reader = new FileReader();
  84.               reader.onload = function(){
  85.                 var output = document.getElementById('output');
  86.                 output.src = reader.result;
  87.               };
  88.               reader.readAsDataURL(event.target.files[0]);
  89.             };
  90.       </script>
  91.     </div>
  92.     <div class="sidebar">
  93.         <h1>Dodawanie elementów</h1>
  94.         <label>Dodaj obraz:
  95.         <input type="file" accept="image/*" onchange="loadFile(event)"> </label> <br/>
  96.         <label>Wpisz ilość śrubek:
  97.         <input type="text" name="lsrubki" value="" id="ilosc"> </label>
  98.         <button onclick="ilosc()">Dodaj</button>
  99.     </div>
  100.  
  101.     <script>
  102.         function ilosc(){
  103.             var ilosc = document.getElementById("ilosc").value;
  104.  
  105.             for(var i = 1; i <= ilosc; i++) {
  106.                 const element1 = document.createElement("span");
  107.  
  108.                 element1.id = "item"+i;
  109.                 element1.className = "item";
  110.  
  111.                 element1.innerText = i;
  112.                
  113.  
  114.                 const div = document.querySelector("#container");
  115.                 div.appendChild(element1);
  116.  
  117.                 var dragItem = document.querySelector("#item");
  118.                 var container = document.querySelector("#container");
  119.  
  120.                 var active = false;
  121.                 var currentX;
  122.                 var currentY;
  123.                 var initialX;
  124.                 var initialY;
  125.                 var xOffset = 0;
  126.                 var yOffset = 0;
  127.             }
  128.  
  129.             var items = document.querySelectorAll(".item");
  130.  
  131.             items.forEach(function(item) {
  132.                 item.addEventListener("touchstart", dragStart, false);
  133.                 item.addEventListener("touchend", dragEnd, false);
  134.                 item.addEventListener("touchmove", drag, false);
  135.  
  136.                 item.addEventListener("mousedown", dragStart, false);
  137.                 item.addEventListener("mouseup", dragEnd, false);
  138.                 item.addEventListener("mousemove", drag, false);
  139.             })
  140.  
  141.                 function dragStart(e) {
  142.                    
  143.                     if (e.type === "touchstart") {
  144.                         initialX = e.touches[0].clientX - xOffset;
  145.                         initialY = e.touches[0].clientY - yOffset;
  146.                     } else {
  147.                         initialX = e.clientX - xOffset;
  148.                         initialY = e.clientY - yOffset;
  149.                     }
  150.  
  151.                     if (e.target === this) {
  152.                         active = true;
  153.                     }
  154.                 }
  155.  
  156.                 function dragEnd(e) {
  157.                     console.log(e)
  158.                     initialX = currentX;
  159.                     initialY = currentY;
  160.  
  161.                     active = false;
  162.                 }
  163.  
  164.                 function drag(e) {
  165.                     if (active) {
  166.                       e.preventDefault();
  167.  
  168.                       if (e.type === "touchmove") {
  169.                           currentX = e.touches[0].clientX - initialX;
  170.                           currentY = e.touches[0].clientY - initialY;
  171.                       } else {
  172.                           currentX = e.clientX - initialX;
  173.                           currentY = e.clientY - initialY;
  174.                       }
  175.  
  176.                       xOffset = currentX;
  177.                       yOffset = currentY;
  178.  
  179.                       setTranslate(currentX, currentY, this);
  180.                     }
  181.                 }
  182.  
  183.                 function setTranslate(xPos, yPos, el) {
  184.                     el.style.transform = "translate3d(" + xPos + "px, " + yPos + "px, 0)";
  185.                 }
  186.             }
  187.  
  188.  
  189.     </script>
  190. </body>
  191.  
  192. </html>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!
 
Top