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

本文链接：https://blog.youkuaiyun.com/allen_csdns/article/details/104820133

本文介绍了如何使用HTML和Vue两种方法来实现可拖拽和最小化的对话框功能。在HTML实现中，主要涉及CSS和JavaScript技术。而在Vue中，通过创建自定义指令并在组件上应用来实现相同效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>
    </div>
</div>
 
<script src="http://libs.baidu.com/jquery/2.1.4/