弹窗拖拽

最新推荐文章于 2023-07-17 14:11:37 发布
最新推荐文章于 2023-07-17 14:11:37 发布
阅读量475 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011490072/article/details/52346919
版权
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">    
<html>    
  <head>    
     
        
    <title>弹出层</title>    
    <meta http-equiv="pragma" content="no-cache">    
    <meta http-equiv="cache-control" content="no-cache">    
    <meta http-equiv="expires" content="0">        
    <meta http-equiv="description" content="This is my page">    
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  </head>
<body>
<button id="show">显示</button> 
<div class="win"> 
<div class="wTop"><p style="float:right;margin:5px 5px 0px 0px;color:white" id="hidden">X</p></div> 
<div class="content"></div> 
</div> 




<style type="text/css"> 
.win{width:500px;height:600px;background:#000000;border-radius:8px;box-shadow:0px 0px 5px 10px;opacity:0.8;position:absolute;left:0;top:0;display:none} 
.win .wTop{height:30px;width:100%;cursor:move} 
.win .content{height:570px;width:100%;border-radius:5px;background:white} 
</style> 




<script language="javascript" type="text/javascript"> 
$(function(){ 
//拖拽 
dragAndDrop(); 
//初始化位置 
initPosition(); 
//点击按钮 
clickShowBtn(); 
}); 
//拖拽 
function dragAndDrop(){ 
var _move=false;//移动标记 
var _x,_y;//鼠标离控件左上角的相对位置 
$(".wTop").mousedown(function(e){ 
_move=true; 
_x=e.pageX-parseInt($(".win").css("left")); 
_y=e.pageY-parseInt($(".win").css("top")); 
//$(".wTop").fadeTo(20,0.5);//点击开始拖动并透明显示 
}); 
$(document).mousemove(function(e){ 
if(_move){ 
var x=e.pageX-_x;//移动时鼠标位置计算控件左上角的绝对位置 
var y=e.pageY-_y; 
$(".win").css({top:y,left:x});//控件新位置 
} 
}).mouseup(function(){ 
_move=false; 
//$(".wTop").fadeTo("fast",1);//松开鼠标后停止移动并恢复成不透明 
}); 
} 
//初始化拖拽div的位置 
function initPosition(){ 
//计算初始化位置 
var itop=($(document).height()-$(".win").height())/2; 
var ileft=($(document).width()-$(".win").width())/1.8; 
//设置被拖拽div的位置 
$(".win").css({top:itop,left:ileft}); 
} 
//点击显示按钮 
function clickShowBtn(){ 
$("#show").click(function(){ 
$(".win").show(1000); 
}); 


$("#hidden").click(function(){ 
$(".win").hide(1000); 
}); 
} 
</script> 
</body>
hxj19910814
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
bootstrap实现弹窗和拖动效果
09-02
主要介绍了bootstrap实现弹窗和拖动效果的相关资料,需要的朋友可以参考下
原生js实现自由拖拽弹窗代码demo
10-22
主要为大家详细介绍了原生js实现弹窗拖拽代码demo，以及在实现js弹窗拖拽效果需要注意的事项，感兴趣的小伙伴们可以参考一下
简单漂亮的js弹窗可自由拖拽且兼容大部分浏览器
10-26
js弹窗想必大家都有见到过吧，如何要说可以自由拖拽，并兼容大部分浏览器的就没有几个了吧，本文的这个示例或许是大家要找的，可以参考下
VUE实现可随意拖动的弹窗组件
10-17
今天小编就为大家分享一篇VUE实现可随意拖动的弹窗组件，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
ElementUI的Dialog弹窗实现拖拽移动功能
蓝胖子的博客
07-04 1万+
ElementUI的Dialog弹窗实现拖拽移动功能
element 弹窗 实现拖拽 放大 拉伸
qq_38935512的博客
11-10 1632
使用：直接引入js, 在el-dialog上只是使用v-dialogDrag 就可以了，斜角拉升 有点问题，建议注释掉，我下面已经注释了。自定义一个指令，下方代码直接使用，针对的是element 弹窗。
vue elemenet 弹窗拖拽
前端-舟遥遥的博客
07-11 3553
实现一个拖拽指令，可在父元素区域任意拖拽元素
弹出框（模态框）拖拽
IT913913的博客
02-22 1001
点击弹出层，会弹出模态框，且显示灰色半透明的遮挡层。 点击关闭按钮，可以关闭弹出框，且灰色半透明遮挡层关闭。 按住鼠标拖拽弹出框在页面中移动。 可以停止拖动弹出框移动。 （ ① 弹出框和遮挡层就会显示出来 display:block; ② 弹出框和遮挡层就会隐藏起来 display:none; ③ 在页面中拖拽的原理： 鼠标按下并且移动， 之后松开鼠标 ④ 触发事件是鼠标按下 mousedown， 鼠标移动mousemove 鼠标松开 mouseup ⑤ 拖拽过程: 鼠标移动过程中，获得最新的值赋
Vue Dialog弹窗拖拽功能 可拉伸调整大小 双击全屏
瘾丶病的博客
12-10 3268
Vue Dialog弹窗拖拽功能 可拉伸调整大小 双击全屏。
js实现弹出div任意拖拽
08-17
js实现弹出div任意拖拽
element弹窗拖拽 v-dialogDrag
最新发布
02-21
弹窗拖拽使用v-dialogDrag即可实现弹窗拖拽
html 弹窗实现拖拽,基于js实现可拖动弹出框插件
weixin_35952000的博客
06-17 1320
特效描述：基于js实现 可拖动 弹出框。基于js实现可拖动弹出框插件代码结构1. 引入CSS2. 引入JS3. HTML代码easyDialog v2.0演示与说明使用默认的HTML模板var btnFn = function(){alert( e.target );return false;};easyDialog.open({container : {header : '弹出层标题',cont...
antd+vue弹窗实现拖拽功能
nice444638562的博客
07-17 1839
请注意，上述只是一个简单的示例，你还可以根据实际需求进行更多自定义和扩展。另外，如果你想添加更高级的拖拽功能，你可能需要使用其他拖拽库或自行编写代码来实现。请注意，这只是一个简单的示例，仅实现了最基本的拖拽功能。你可以根据你的实际需求自定义自己的指令，并在其中添加更多的拖拽逻辑和样式。另外，如果你使用的是 TypeScript，记得在 Vue 组件中添加指令的类型声明。上面的代码中，我们使用了 Modal 组件来创建弹窗，并在弹窗内部嵌套了。你可以根据需要自定义弹窗的样式和内容，以及在。
vue实现elementUI的弹窗可拖拽移动效果
weixin_44801790的博客
02-23 390
vue实现elementUI的弹窗可拖拽移动效果
antd——拖动弹窗——实现弹窗的拖动功能——技能提升
yehaocheng520的博客
12-29 2508
最近同事封装了一个可以拖动的弹窗，效果图如下： 下面将代码附录如下：希望以后可以达到自行封装代码的程度： 感觉同事的代码跟大神https://www.cnblogs.com/mankii/p/13970970.html 的代码一致，大神就是大神，超级厉害！！！ 1.封装拖动弹窗组件——index.vue 1.1html部分代码 <template> <a-modal :class="[modalClass,simpleClass]" :visible="visible" v-bind
python对不起！原来可以直接写文字？？
热门推荐
dyyay521的博客
09-22 2万+
感觉自己火了一下下是肿么回事！！上次说的太水了，这次冲着你们也要说点有营养的！！咳咳，， 这次我们认真点，想要用python去写一个名字，或者写一些其他东西： 菜鸟级： 上次说的：“turtle.write”，它具体的格式是这样子滴： write(arg,move=false,align='left',font=('fontname、fontsi...
vue中实现element-ui dialog的弹窗拖拽+水平方向伸缩
一点一滴
03-29 2万+
import Vue from "vue"; // v-dialogDrag: 弹窗拖拽+水平方向伸缩 /* * 使用方法 * 将以下代码复制到一个js文件中，然后在入口文件main.js中import引入即可； * 给elementUI的dialog上加上 v-dialogDrag 指令就可以实现弹窗的全屏和拉伸了。 * 给dialog设置 :close-on-click-mo...
用vue3 手写一个弹窗拖拽组件
06-10
好的，我可以帮你手写一个基于Vue3的弹窗拖拽组件示例代码。 首先，你需要安装Vue3: ``` npm install vue@next ``` 然后，创建一个Draggable.vue组件，代码如下： ```vue <template> <div class="draggable" :style="{ left: left + 'px', top: top + 'px' }"> <div class="title" @mousedown="dragStart"> {{ title }} </div> <div class="content"> <slot /> </div> </div> </template> <script> import { ref } from 'vue'; export default { props: { title: { type: String, default: '', }, }, setup(props, { emit }) { const left = ref(0); const top = ref(0); let startX, startY, offsetX, offsetY; function dragStart(e) { startX = e.clientX; startY = e.clientY; offsetX = left.value; offsetY = top.value; document.addEventListener('mousemove', drag); document.addEventListener('mouseup', dragEnd); } function drag(e) { const moveX = e.clientX - startX; const moveY = e.clientY - startY; left.value = offsetX + moveX; top.value = offsetY + moveY; } function dragEnd() { document.removeEventListener('mousemove', drag); document.removeEventListener('mouseup', dragEnd); } return { left, top, dragStart, }; }, }; </script> <style scoped> .draggable { position: absolute; width: 300px; height: 200px; background-color: #fff; border: 1px solid #ccc; box-shadow: 1px 1px 5px #ccc; } .title { cursor: move; padding: 10px; background-color: #eee; border-bottom: 1px solid #ccc; } .content { padding: 10px; } </style> ``` 在上面的代码中，我们使用了Vue3的Composition API来实现拖拽功能，使用了ref来定义left和top变量，使用了setup函数来定义组件逻辑。在dragStart函数中，我们记录了鼠标按下时的坐标和弹窗的偏移量，在drag函数中计算出弹窗的新位置，最后在dragEnd函数中移除了鼠标移动事件。 使用这个组件非常简单，只需要在父组件中引入Draggable组件，然后使用类似于普通的HTML标签的方式来使用它，例如： ```vue <template> <div> <button @click="showDialog = true">打开弹窗</button> <draggable v-if="showDialog" title="弹窗标题"> <p>这是弹窗内容</p> <button @click="showDialog = false">关闭弹窗</button> </draggable> </div> </template> <script> import Draggable from './Draggable.vue'; export default { components: { Draggable, }, data() { return { showDialog: false, }; }, }; </script> ``` 在上面的代码中，我们在父组件中引入了Draggable组件，并在父组件的data对象中定义了一个showDialog变量来控制弹窗的显示和隐藏。当点击打开弹窗按钮时，showDialog变量会被设置为true，从而显示弹窗；当点击弹窗内的关闭按钮时，showDialog变量会被设置为false，从而隐藏弹窗。 希望这个示例可以帮助你手写一个基于Vue3的弹窗拖拽组件！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值