Wishing the new release wall can be removed, you can drag.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>许愿墙</title> <style> * { margin: 0; padding: 0; } html { height: 100%; background: linear-gradient(0deg, rgb(171, 212, 238), deepskyblue); } body { position: relative; } .container { width: 100%; height: 630px; position: relative; } input[id="res"] { width: 300px; height: 40px; position: fixed; bottom: 30px; left: 50%; margin-left: -150px; padding-left: 15px; border: 1px solid #ccc; outline: none; border-radius: 5px; } .item { width: 150px; height: 150px; position: absolute; top: 100px; left: 100px; box-shadow: 0 2px 10px 1px rgba(0, 0, 0, 0.2); padding: 10px; border-radius: 15px/5px 10px 10px 0; transform: skew(-1deg); cursor: move; } .item span { position: absolute; right: 6px; bottom: 4px; font-size: 12px; color: #eee; cursor: pointer; } .comfirmBtn { width: 100px; height: 40px; position: fixed; bottom: 31px; left: 64%; border: none; outline: none; border: 1px Solid; border-RADIUS: 10px; Cursor: pointer; } </style> </ head> <body> <div class = "Container"> </ div> <INPUT type = "text" name = "RES" ID = "RES "placeholder =" ones who did it ... click the OK button release "> <the button class =" comfirmBtn "> click Post </ the button> <Script> // get DOM elements let container = document.getElementsByClassName ( 'container' ) [0]; the let btn = document.getElementsByClassName ( 'comfirmBtn') [0]; // default Wishing single word let wishes = [ 'New Year's to good luck', 'could find a good job,' 'Japanese grade examination by ',' can your girlfriend ',' New Year's to good luck, ''Can find a good job, '' Japanese grade examination by ',' can your girlfriend ']; // Wishing single random background color let bgcColors = [ '# 96c2f1' , '# bbe1f1', '# e3e197', '# f8b3d0', '# ffcc00', 'rgba (255,123,123,1)', 'yellowgreen', 'pink', 'skyblue'] ; e3e197 # ',' # f8b3d0 ',' # FFCC00 ',' RGBA (255,123,123,1) ',' YellowGreen ',' Pink ',' Skyblue ']; // add a function to render a div element configuration after doing css the return div the let the render = function (Wish) { // generate random data the let bgcColorIndex = Math.floor (Math.random () * bgcColors.length); the let randomTop = Math.floor (Math.random () * (630. - 150) ); // container vessel height minus 150 the let randomLeft = Math.floor (Math.random () * (window.innerWidth - 175)); // left value subtracting the width of the box 150 on the basis of multi-minus 25px the let Content = `<div class =" Item "style =" Top: $ {randomTop} PX; left: $ {randomLeft} PX; background-Color: $ {bgcColors [bgcColorIndex]} "> $ {Wish} <span > Close </ span> </ div> `; container.innerHTML += content; } // the default page of the beginning of the loading wishing to load a single page the window.onload = function () { // the default traverse all wishing single to render to the top page for (the let I = 0; I <wishes.length; I ++) { the render (Wishes [I]); } } // new content function the let newContent = function () { IF (res.value == ''!) { the let the inputText = res.value; the render (the inputText); res.value = ''; } the else { Alert ( 'not empty'!); } } // there are two ways to add a new desire press Enter release button or click document.onkeyup = function (E) { IF (e.keyCode 13 is ===) { newContent (); } } // add button click event to confirm btn.onclick = newContent; // bind the click event to the entire document commissioned by the event but only click on the span element is removed when its parent document.onclick = function (E) { IF ( === e.target.nodeName 'the SPAN') { Container.removeChild (e.target.parentNode); } } // set wishing single drag container.onmousedown = function (E) { IF (= e.target.className == 'Item') { the let = offsetX the parseInt (e.target.style.left); // get the current x-axis distance let offsetY = parseInt (e.target.style.top); // get the current y-axis distance let innerX = event.clientX - offsetX; // Get the mouse in the box the wheelbase x let innerY = event.clientY - offsetY; // Get the mouse in the box the wheelbase y let that = e.target; document.onmousemove = function (E) { that.style.left = event.clientX - innerX + "PX"; that.style.top event.clientY = - + innerY "PX"; // boundary determining if (parseInt (that.style.left) <= 0) // left border { that.style.left = "0px"; } IF (the parseInt (that .style.top) <= 0) // upper boundary { that.style.top = "0px"; } IF (the parseInt (that.style.left)> = window.innerWidth - 175) // = the right boundary of the window width - slightly more box size minus 25px { that.style.left window.innerWidth = - 175 + "PX"; } IF (the parseInt (that.style.top)> = 480) // bottom 630. boundary = - 150 { that.style.top = 480 + "PX"; } } document.onmouseup = function () { document.onmousemove = null; document.onmouseup = null; } } } </ Script> </ body> </ HTML>