JSFiddle - React, Tailwind, and code Playground

by dtdxrk

HTML

<div class="box" id="popBox" style="top:0px;left:0px;">
     <h1>Js可拖拽的弹出框</h1>
     <p>
 
     </p>
 </div>
 
 <div class="box" id="popBox2" style="top:80px;left:0px;">
     <h1>Js可拖拽的弹出框</h1>
     <p>
 
     </p>
 </div>

CSS

body{margin:0}
 .box{
     width:350px; 
     border:1px solid #cfcfcf;
     box-shadow:2px 3px 0 rgba(190,190,190,0.3);
     text-align:center;
     padding-bottom:20px;
     background-color: #fff;
     z-index: 100;
     position: absolute;
     padding: 0;
 }
 .box h1{
     height:30px;
     line-height:30px;
     font-size:14px;
     text-align: left;
     margin:0 0 20px 0;
     background-color:green;
     color:#fff;
     border-bottom: 1px solid #cfcfcf;
     padding-left:15px;
     cursor:move;
 }

JavaScript

function Drag(id, zindex){
     var box = document.getElementById(id),
         h1 = box.getElementsByTagName("h1")[0];
     var scrollHeight = window.screen.availHeight,
         scrollWidth = window.screen.availWidth;
     // box.style.top = "0px",
     // box.style.left = "0px",
     box.style.zIndex = zindex;
 
     h1.onmousedown = function(event){    //鼠标按钮被按下
         box.style.opacity = 0.5;
         var event = window.event || event;
         var mouseX = event.clientX,
             mouseY = event.clientY,
             objY = parseInt(box.style.top),
             objX = parseInt(box.style.left);
 
         document.onmousemove = function(event){
             var event = window.event || event;
             box.style.top = event.clientY - mouseY + objY + "px",
             box.style.left =event.clientX - mouseX + objX + "px";
         }
 
         document.onmouseup = function(){    //鼠标按键松开
             box.style.opacity = 1;
             document.onmousemove = null;
         }
     }
 }
 
Drag("popBox",2);
Drag("popBox2",3);