JSFiddle - React, Tailwind, and code Playground

by liyilongcarlos

HTML

<button>弹出</button>
	<div id="box">
		<h3><span>关闭</span>鼠标左键拖动</h3>
		<hr/>
		<p>有点小问题，不能快速的拖动，慢慢拖吧。。。以后有时间修改</p>
		
	</div>

CSS

*{margin:0px;
		padding: 0px;}
	body{
		font-size: 14px;
		padding: 100px;
	}
	#box{
		width:500px;
		height:400px;
		border:3px ridge #ccc;
		display: none;
		box-shadow: 2px 2px 20px #888888;
		position:absolute;
		top:120px;
		left:120px;
	}
	#box h3{
		height:30px;
		line-height: 30px;
		background-color: #ABCDEF;
		padding-left: 10px;
		padding-right:10px;
		color: white;
		cursor: move;
	}
	#box span{
		float: right;
		font-size: 12px;
		cursor: pointer;
		color:red;
	}
	#box p{
		height:350px;
		padding: 10px;
		box-shadow: 3px 3px 10px #aaa inset;
		background: #FAFAFA;
	}

JavaScript

var x=0;
		var y=0;
		var flag=false;
		$(document).ready(function(){
			$("button").click(function(){
				$("#box").show();
			})
			
			$("h3").mousedown(function(event){
				//判断鼠标左键
				if(event.which==1){
					flag=true;
					
					x=event.pageX-parseInt($("#box").css("left"));
					y=event.pageY-parseInt($("#box").css("top"));
				}
			})

			$("h3").mousemove(function(event){
				if(flag){
					//dx,dy鼠标移动的距离
					var dx=0;
					var dy=0;

					dx=event.pageX-x;
					dy=event.pageY-y;
					//不要加引号！！！
					$("#box").css({
						"top":dy,"left":dx
					})	
				}		
				
			})

			$("h3").mouseup(function(event) {
				flag=false;
			});

			$("span").click(function(){
				$("#box").hide();
				//关闭之后，应返回原来的位置
				$("#box").css({
					top:120,left:120
				})	
			})
		})