制作一个可拖动的html对话框

制作对话框，最简单的方式是使用jQuery的ui插件，一行代码就搞定。

$("<div>我是一个对话框</div>").dialog(); 

但是前提是需要引入jquery和ui库：

<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"/>
<script src="http://code.jquery.com/jquery-1.11.2.min.js">
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.min.js">

jQuery UI的js库是比较庞大的，上面的版本需要约80kb，下载和解析都会比较花时间（当然可以进行用ui库的定制版）。为了一个对话框，动用了一个比较大的框架，然后使用了一小部分功能，有点不太值得。其实我们可以自己动手写一个有拖动效果的效果的对话框，不需要借助jQuery UI.

一、需求和效果

在页面点击合作协议时，弹出合作协议的对话框（页面添加了遮罩效果），并且可以用鼠标进行拖动。

二、原理分析

主要利用mousemove事件，当鼠标移动的时候让对话框