vue和html两种方式实现可拖拽对话框以及最小化

html方式：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>弹框（拖动）</title>
<style type="text/css">
.pannel{
    width: 500px;
    height: 300px;
    background-color: #FF8604;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.pannel .title{
	width: 100%;
	height: 50px;
    line-height: 50px;
	background-color: #4390EE;
	position: absolute;
	left: 0;
	top: 0;
    border-radius: 6px 6px 0 0;
}
.pannel .content{
    width: 100%;
    position: absolute;
    top: 50px;
    bottom: 0;
    background-color: red;
    border-radius: 0 0 6px 6px;
}
</style>
</head>
<body>
 <input type="button" value="最大化" οnclick="max.Click()"><input type="button" value="最小化" οnclick="min.Click()">

<object id="min" type="application/x-oleobject" classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11">
<param name="Command" value="Minimize">
</object>

<object id="max" type="application/x-oleobject" classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11">
<param name="Command" value="Maximize">
</object>

<div class="pannel">
    <div class="title" id="title_1">
        <div>标题1</div>
    </div>
    <div class="content">
        <div>内容111</div>

vue和html两种方式实现可拖拽对话框以及最小化

悦读