jQuery实现了一个自定义窗口的随机拖放。

在Web上，我们经常看到当你点击一个按钮时，一个自定义窗口就会弹出，它可以随意拖动来改变它的位置。

使用jQuery进行拖放，必须有jQuery的文件，即实现步骤：

1。介绍jQuery文件

2。写js脚本

具体的代码：

HTML代码：
复制代码代码如下所示：
显示

X



CSS样式：
复制代码代码如下所示：

。赢{宽度：500px；身高：600px；背景：# 000000；边界半径：8px；盒的影子：0px 0px 5px 10px；不透明度：0.8；位置：绝对；左：0；位置：绝对的；
。赢。WTOP {身高：30px；宽度：100%；}：移动光标
。赢。内容{身高：570px；宽度：100%；边界半径：5px；背景：白}


JS脚本：
复制代码代码如下所示：

$（函数（）{（））
拖动
DragAndDrop（）；
初始化
走（）；
单击按钮
ClickShowBtn（）；
}）；
拖动
功能拖放（）{
无功_move = false； / /移动标签
无功_x，_y； / /鼠标从控件的左上角的相对位置
$（。WTOP）。Mousedown（function（e）{
_move =真；
_x = e.pagex-parseint（$（赢），Css（左））；
_y = e.pagey-parseint（$（赢），Css（顶））；
/ / $（。WTOP）。FadeTo（20,0.5）； / /单击拖动透明显示
}）；
$（document）。Mousemove（function（e）{
如果（_move）{
var x = e.pagex-_x； / /移动计算的控制鼠标位置的左上角的绝对位置
var y = e.pagey-_y；
$（）Css。
}
}）。Mouseup（function（）{）
_move = false；
/ / $（。WTOP）。FadeTo（快
}）；
}
拖放的位置
功能走（）{
初始化位置计算
VaR ITOP =（$（document）（的高度）$（赢），高度（ / 2））；
VaR离开=（$（document）（宽度）$（赢），宽度（ / 1.8））；
设置是div /拖动的位置。
$（赢）。Css（{顶：伊通，离开：离开}）；
}
单击按钮显示
功能clickshowbtn（）{
$（#秀），Click（function（）{）
$（）。（1000）；
}）；

$（#隐藏），Click（function（）{）
$（）。隐藏（1000）；
}）；
}


js文件介绍
复制代码代码如下所示：