API tools faq
paste
DrRandom

Draggable Blocks

DrRandom
Apr 29th, 2020
125
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 7.65 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8. </head>
  9. <style>
  10.     * {
  11.         box-sizing: border-box;
  12.     }
  13.    
  14.     .wrapper {
  15.         position: relative;
  16.         width: 20em;
  17.         z-index: 9;
  18.         background-color: #f1f1f1;
  19.         border: 1px solid #d3d3d3;
  20.         border-radius: 2%;
  21.         box-sizing: border-box;
  22.     }
  23.    
  24.     .wrapper > div {
  25.         border-radius: 5px;
  26.         padding: 2px;
  27.     }
  28.    
  29.     .wrapper {
  30.         display: grid;
  31.         grid-template-columns: repeat(3, 1fr);
  32.         grid-gap: 10px;
  33.         grid-auto-rows: minmax(50px, auto);
  34.     }
  35.    
  36.     .output {
  37.         grid-column: 3 / 4;
  38.         grid-row: 2 / 3;
  39.     }
  40.    
  41.     .timers {
  42.         margin-right: 5px;
  43.         position: absolute;
  44.         bottom:0px;
  45.         right: 0px;
  46.         grid-column: 3 / 4;
  47.         grid-row: 3 / 5;
  48.     }
  49.    
  50.     .timer,
  51.     .date {
  52.         width: 150px;
  53.     }
  54.    
  55.     .inputs {
  56.         width:100px;
  57.         grid-column: 1/3;
  58.         grid-row: 2 / 5;
  59.     }
  60.    
  61.     .header {
  62.         text-align: center;
  63.         cursor: move;
  64.         background-color: #2196F3;
  65.         color: #fff;
  66.         grid-column: 1/4;
  67.         grid-row: 1 / 2;
  68.     }
  69.    
  70.     a {
  71.         text-decoration: none;
  72.     }
  73.     .output-dropdown{
  74.         position: relative;
  75.         display: inline-block;
  76.         text-align: left;
  77.         width: 150px;
  78.     }
  79.     .dropdown {
  80.         position: relative;
  81.         display: inline-block;
  82.         text-align: left;
  83.         width: 100%;
  84.         margin-bottom: 30px;
  85.     }
  86.    
  87.     .dropdown-text {
  88.         cursor: pointer;
  89.         position: absolute;
  90.         text-indent: 10px;
  91.         line-height: 32px;
  92.         background-color: #eee;
  93.         border: 1px solid #ccc;
  94.         border-radius: 3px;
  95.         box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 1px 3px rgba(0, 0, 0, .1);
  96.         width: 100%;
  97.     }
  98.    
  99.     .dropdown-text:after {
  100.         position: absolute;
  101.         right: 6px;
  102.         top: 15px;
  103.         content: '';
  104.         width: 0px;
  105.         height: 0px;
  106.         border-style: solid;
  107.         border-width: 5px 4px 0 4px;
  108.         border-color: #555 transparent transparent transparent;
  109.     }
  110.    
  111.     .dropdown-text,
  112.     .dropdown-content a {
  113.         color: #333;
  114.         text-shadow: 0 1px #fff;
  115.     }
  116.    
  117.     .dropdown-toggle {
  118.         font-size: 0;
  119.         z-index: 1;
  120.         cursor: pointer;
  121.         position: absolute;
  122.         top: 0;
  123.         border: none;
  124.         padding: 0;
  125.         margin: 0 0 0 1px;
  126.         background: transparent;
  127.         text-indent: -10px;
  128.         height: 34px;
  129.         width: 100%;
  130.     }
  131.    
  132.     .dropdown-toggle:focus {
  133.         outline: 0;
  134.     }
  135.    
  136.     .dropdown-content {
  137.         -webkit-transition: all .25s ease;
  138.         -moz-transition: all .25s ease;
  139.         -ms-transition: all .25s ease;
  140.         -o-transition: all .25s ease;
  141.         transition: all .25s ease;
  142.         list-style-type: none;
  143.         position: absolute;
  144.         top: 32px;
  145.         padding: 0;
  146.         margin: 0;
  147.         opacity: 0;
  148.         visibility: hidden;
  149.         border-radius: 3px;
  150.         text-indent: 10px;
  151.         line-height: 32px;
  152.         background-color: #eee;
  153.         border: 1px solid #ccc;
  154.         width: 140px;
  155.         z-index: 50;
  156.     }
  157.    
  158.     .dropdown-content a {
  159.         display: block;
  160.     }
  161.    
  162.     .dropdown-content a:hover {
  163.         background: #e8e8e8;
  164.     }
  165.    
  166.     .dropdown-toggle:hover ~ .dropdown-text,
  167.     .dropdown-toggle:focus ~ .dropdown-text {
  168.         background-color: #e8e8e8;
  169.     }
  170.    
  171.     .dropdown-toggle:focus ~ .dropdown-text {
  172.         box-shadow: 0 1px 3px rgba(0, 0, 0, .2) inset, 0 1px 0 rgba(255, 255, 255, 0.8);
  173.         z-index: 2;
  174.     }
  175.    
  176.     .dropdown-toggle:focus ~ .dropdown-text:after {
  177.         border-width: 0 4px 5px 4px;
  178.         border-color: transparent transparent #555 transparent;
  179.     }
  180.    
  181.     .dropdown-content:hover,
  182.     .dropdown-toggle:focus ~ .dropdown-content {
  183.         opacity: 1;
  184.         visibility: visible;
  185.         top: 42px;
  186.     }
  187.  
  188.     .savebtn{
  189.         background-color: rgba(68, 243, 33, 0.459);
  190.         color: #fff;
  191.     }
  192. </style>
  193.  
  194. <body onload="GenerateBlocks()">
  195.     <div id="canvas"><button onclick="GenerateBlocks()">Generate Block</button></div>
  196. </body>
  197.  
  198. <script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>
  199. <script>
  200.     function dragElement(elmnt) {
  201.     var pos1 = 0,
  202.         pos2 = 0,
  203.         pos3 = 0,
  204.         pos4 = 0;
  205.     if (document.getElementById(elmnt.id + "header")) {
  206.         document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
  207.     }
  208.  
  209.     function dragMouseDown(e) {
  210.         e = e || window.event;
  211.         e.preventDefault();
  212.         pos3 = e.clientX;
  213.         pos4 = e.clientY;
  214.         document.onmouseup = closeDragElement;
  215.         document.onmousemove = elementDrag;
  216.     }
  217.  
  218.     function elementDrag(e) {
  219.         e = e || window.event;
  220.         e.preventDefault();
  221.         pos1 = pos3 - e.clientX;
  222.         pos2 = pos4 - e.clientY;
  223.         pos3 = e.clientX;
  224.         pos4 = e.clientY;
  225.         elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
  226.         elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
  227.     }
  228.  
  229.     function closeDragElement() {
  230.         document.onmouseup = null;
  231.         document.onmousemove = null;
  232.     }
  233. }
  234.  
  235. var GlobalID = 0;
  236. var GlobalBlockArray = [];
  237. function GenerateBlocks() {
  238.     var OutputOptions = 5;
  239.     var InputOptions = 5;
  240.     var Inputs;
  241.     Block = '<div id="Movable';
  242.    Block += GlobalID;
  243.    Block += '" class="wrapper">' +
  244.         '<div class="output">' +
  245.         '<div class="output-dropdown">' +
  246.         '<input class="dropdown-toggle" type="text">' +
  247.         '<div class="dropdown-text">Output</div>' +
  248.         '<ul class="dropdown-content">';
  249.     for (k = 0; k < OutputOptions; k++) {
  250.        Block += '<li><a id="';
  251.        Block += k;
  252.        Block += '"href="#">Output';
  253.         Block += k;
  254.         Block += '</a></li>';
  255.     }
  256.     Block += '</ul>' +
  257.         '</div>' +
  258.         '</div>' +
  259.         '<div class="timers">' +
  260.         '<input class="timer" type="text" placeholder="timer">' +
  261.         '<input class="date" type="datetime-local" id="myLocalDate" step="2">' +
  262.         '</div>' +
  263.         '<div class="inputs">';
  264.     for (i = 0; i < 6; i++) {
  265.        Inputs = '<div id="Dropdown';
  266.        Inputs += i;
  267.        Inputs += '"class="dropdown">' +
  268.             '<input class="dropdown-toggle" type="text">' +
  269.             '<div class="dropdown-text">Input</div>' +
  270.             '<ul class="dropdown-content">';
  271.         for (b = 0; b < InputOptions; b++) {
  272.            Inputs += '<li><a id="';
  273.            Inputs += (b + 10);
  274.            Inputs += '"href="#">Input';
  275.             Inputs += (b + 10);
  276.             Inputs += '</a></li>';
  277.         }
  278.         Inputs += '</ul></div>';
  279.         Block += Inputs;
  280.     }
  281.     Block += '</div>' +
  282.         '<div id="Movable';
  283.        Block += GlobalID;
  284.        Block += 'header" class="header">' +
  285.         'Itt mozgathatod<br>' +
  286.         '<button class="savebtn">Save</button>' +
  287.         '</div>' +
  288.         '</div>' +
  289.         '</div>';
  290.     document.getElementById("canvas").innerHTML += Block;
  291.     GlobalBlockArray.push("Movable" + GlobalID);
  292.  
  293.     for(l = 0;l< GlobalBlockArray.length; l++){
  294.        dragElement(document.getElementById(GlobalBlockArray[l]));
  295.    }
  296.    $('.savebtn').on('click', function() {
  297.        var parent_id = $(this).parent().parent();
  298.        console.log(parent_id);
  299.    })
  300.    GlobalID++;
  301. }
  302.  
  303. </script>
  304.  
  305. </html>
Add Comment
Please, Sign In to add comment
Public Pastes
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!