v-drag 可拖拽 div容器中含有input无法输入

已于 2022-05-31 16:08:11 修改
阅读量1.2k 收藏 5
点赞数 3
分类专栏： 前端 文章标签： 前端
于 2022-05-31 15:07:05 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/F_mengze/article/details/125065844
版权

继上篇文章 vue写一个可全屏拖拽容器效果之后，发现了：如果可拖动的div中有input输入框的话，不做处理input无法输入内容，所以我们需要在oDiv.onmousedown事件中加上以下代码，就可以解决input输入框无法输入的问题！

if(e.target.nodeName == 'INPUT'||e.target.nodeName == 'TEXTAREA'){
	return
}

如图：
在这里插入图片描述
这样就解决了input无法输入了！！

玺..
关注
  • 3
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
draggable拖动input输入框不能选中_前端拖动排序实践
weixin_29528865的博客
01-09 1683
前端的拖动排序也是一直很想实践的对象之一。排险者露出那毫无特点的微笑说：“这很难理解吗？当生命意识到宇宙奥秘的存在时，距它最终解开这个奥秘只有一步之遥了。”看到人们仍不明白，他接着说，“比如地球生命，用了四十多亿年时间才第一次意识到宇宙奥秘的存在，但那一时刻距你们建成爱因斯坦赤道只有不到四十万年时间，而这一进程最关键的加速期只有不到五百年时间。如果说那个原始人对字宙的几分钟凝视是看到了一颗宝石，其...
解决angular 使用原生拖拽页面卡顿及表单控件输入延迟问题
10-15
在Angular应用中，遇到页面卡顿和表单控件输入延迟的问题通常是由于Angular的变更检测机制和大量DOM操作导致的。Angular的双向绑定是通过脏检查来实现的，当数据发生变化时，它会遍历整个组件树以检测并更新视图。在...
easyUI draggable插件使用不当，导致拖动div内部文本框无法输入；设置echarts数据为空时就显示空白，不要动画和文字...
aa8102980的博客
03-11 242
先上一个Demo <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title></title> ...
使用 div 实现 input、textarea 输入框，并支持 placeholder 属性（解决浏览器兼容问题）
最新发布
2401_84094908的博客
05-07 544
# 使用 contenteditable=“true” 实现的文本框全选内容# 输入框贴贴去除样式并插入到指定光标位置（contenteditable=“true” 实现的输入框也支持）一、 实现 1、给 添加 属性，使 元素变成用户可编辑。2、给 添加 样式，使 可以被用户调整尺寸，注意：同时需要设置 样式，因为 样式不适用于 的块，不然 不会生效，。 支持输入框拉伸的属性：、、3、增加一个 属性，通过 控制显示。二、 实现 1、给 添加 属性，使 元素变成用户可编辑。2、给
input type类型_我的 <input /> 不可能这么可爱
weixin_39647186的博客
11-30 279
作者：陈大鱼头github： KRISACHAN<input /> 标签是我们日常开发中非常常见的替换元素了，但是最近在刷 whattwg 跟 MDN 的时候发现 跟 <input /> 有很多相关的属性，选择器都没怎么用过，所以就开篇文章来整理一下一些比较有趣或者实用的知识点。本篇文章默认大家已经知道 <input /> 标签的基本用法，不会做过多的基础说明~...
vuedraggable使用filter 后，关联的输入框失效（输入框无法获取焦点）
张小胖
05-26 2064
官方文档传送门 一、什么是draggable，用来干嘛的 Vue.Draggable是一款基于Sortable.js实现的vue拖拽插件。支持移动设备、拖拽和选择文本、智能滚动，可以在不同列表间拖拽、不依赖jQuery为基础、vue 2过渡动画兼容、支持撤销操作，总之是一款非常优秀的vue拖拽组件。本篇将介绍如何搭建环境及简单的例子，使用起来特别简单对被拖拽元素也没有CSS样式的特殊要求。 二、draggable 安装 NPM或yarn安装方式 yarn add vuedraggable n
js原生 vue使用draggable进行拖拽填充
lucky_zouzou的博客
04-21 2050
一个需求是将页面上的某个元素拖动到input框中，填充值，使用draggable即可比较简单的实现此需求 1.需要拖动的元素加上draggable属性 <div draggable="true" @dragstart="dragstart">{{ xxx }}</div> 2.拖进的元素上加事件，监听到已有元素进入 <el-input v-model="sourceName" @dragover="(e) => e.preventDefau
vue-form-builder:超级表单生成器基于Vue构建，具有拖放功能，可保存的表单模式和易于维护的表单升级
04-30
形式生成器 一个简单的构建器，可帮助您为功能/模块/站点生成超级表单，...易于使用，创建，升级，维护......在可以使用Vue-Form-Builder时，为什么需要对表单进行编码？通过一些额外的步骤来渲染它：D 好处： 开发...
html5实现多图片预览上传及点击可拖拽控件
09-27
在JavaScript中，我们可以监听`input`元素的`change`事件来获取用户选择的文件，并使用`FileReader`对象的`readAsDataURL`方法读取文件内容，然后将其显示在页面上： ```javascript document.getElementById('...
web中拖拽排序和java后台交互实现方法示例
08-26
Web 中拖拽排序和 Java 后台交互实现方法示例 本文主要介绍了 Web 中拖拽排序和 Java 后台交互实现的相关知识点，通过示例代码详细介绍了如何实现拖拽排序和 Java 后台交互。 一、业务需求 在 Web 中，为了实现...
Vue自定义指令拖拽功能示例
08-31
Vue.js 是一个流行的前端JavaScript框架，它允许开发者创建可复用和可维护的组件。在Vue中，自定义指令（Custom Directives）是扩展Vue功能的一种强大方式，它们可以用来处理DOM操作，如本例中的拖拽功能。下面将...
draggable里包裹的卡片，卡片里有个input,点击input聚焦无效。
lmyh1111的博客
06-29 717
draggable里包裹的卡片，卡片里有个input,点击input聚焦无效。
easyui 弹框中input控件不能输入
lz_demo的博客
01-18 564
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Ma...
VUE3 api方式创建dialog, input没有光标无法输入
qq_39874911的博客
04-05 426
弹出第一层，input是可以正常输入的，在弹出的组件中再弹出一个组件，这时input无法输入，包括原生的<input>也无法输入。
移动端dialog.js弹框中的input输入框不能输入
qq_30908729的博客
06-04 1359
移动端dialog.js弹框中的input输入框不能输入 解决方法： 我在手机页面中使用dialog.js确认弹框中有input标签，但手指点击时不获取焦点，不能输入。 后来f12检查页面的标签，发现弹框中有一个标签的class属性的值是content-scroll，class属性设置content-scroll后，dialog.js就对这个标签绑定了一些事件影响了输入框聚焦。 我的...
vue-drag-resize拖拽Input框问题
xu568110526的博客
05-29 458
下载：yarn add vue-drag-resize。
vue实现拖拽
brake_lzk的博客
06-22 552
vue 拖拽
vue-drag-resize与输入框/文本框冲突解决
band129
08-23 1490
vue-drag-resize与输入框冲突解决办法 拖拽是前端使用较为频繁的功能了，当我们使用vue-drag-resize插件进行拖拽功能实现时，发现它和输入框或文本框有冲突，输入框/文本框无法输入。今天主要说怎么去解决该问题。 在测试过程中，发现出现该问题的原因是输入框的焦点事件和拖拽的点击事件冲突了。找到原因我们就能去解决。 一、vue-drag-resize插件文档中提供的解决办法 <vue-drag-resize @activated="activateEv(index)" />
vuedraggable拖拽组件使用遇见的问题
前端小白成长记
07-08 1656
vuedraggable拖拽组件使用遇见的问题
实现vue-drag-resize拖动Input框，Input可拖动可输入内容，点击Input框内容不清空
05-27
首先需要安装vue-drag-resize插件，然后在组件中引入并注册该插件。 在模板中，可以使用v-draggable和v-resizable指令来实现拖动和调整大小的功能。同时，需要将Input框的value绑定到data中的一个变量，这样在拖动或调整大小后，输入框的值也会随之改变。 为了实现点击Input框内容不清空的功能，可以在Input的focus事件中将输入框的值备份到另一个变量中，在blur事件中再将备份的值赋回到输入框中。 完整代码如下： ```html <template> <div class="container"> <div class="input-box" v-draggable v-resizable :style="{ top: top + 'px', left: left + 'px', width: width + 'px', height: height + 'px' }"> <input type="text" v-model="inputValue" @focus="backupValue" @blur="restoreValue"> </div> </div> </template> <script> import VueDragResize from 'vue-drag-resize'; export default { name: 'DraggableInput', components: { VueDragResize, }, data() { return { top: 100, left: 100, width: 200, height: 50, inputValue: '', inputBackup: '', }; }, methods: { backupValue() { this.inputBackup = this.inputValue; }, restoreValue() { this.inputValue = this.inputBackup; }, }, }; </script> <style> .container { position: relative; height: 500px; background-color: #eee; } .input-box { position: absolute; background-color: #fff; border: 1px solid #666; } .input-box input { width: 100%; height: 100%; border: none; outline: none; padding: 5px; } </style> ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值