使用 jquery 可拖动和可点击的输入元素

2023-12-05

我在可拖动的 div 中有一个输入元素。我的代码应该做以下事情:

  • 当我拖动输入元素时,应该拖动整个可拖动 div。 (已完成)
  • 当我单击输入元素时,我应该能够编辑文本。 (无法完成)

那么,有人可以告诉我如何单击和编辑可拖动的输入元素的文本吗?

这是我的完整代码:

<!DOCTYPE html>
<html>
    <head>
        <title>Draggable and Clickable Input</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="js/jquery.js"></script>
        <script src="js/jquery-ui.js"></script>
        <style>
            .draggable{height:500px;width:500px;background:blue;}
        </style>
    </head>
    <body>

        <div class="draggable" >
            <input type="text" value="drag me!"/>
        </div>

        <script>
            $('.draggable').draggable({
                cancel: ''
            });
        </script>

    </body>
</html>

$('.draggable input').click(function() {
    $(this).focus();
});

输入字段现在是可编辑的,并且您仍然可以从输入字段中拖动整个 div。JSFiddle.

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使用 jquery 可拖动和可点击的输入元素 的相关文章

  • 如何检查元素的内容是否为空,如果是,则在 jquery 中删除该元素

    我目前正在尝试选择某个 div 内没有内容的任何 h2 元素并将其删除 这是我的 html 代码 div class skipToContainer h2 class vidSkipTo Hello h2 h2 class vidSkipT
  • 更改时触发跨度文本/html

    jQuery 或 JavaScript 中是否有任何事件在以下情况下触发span标签 text html 已更改 Code span class user location span user location change functio
  • 仅在首页加载时使用 cookie 加载 colorbox

    我尝试了来自网络的参考代码 仅在页面加载时加载特定元素一次 这是示例代码
  • 使用 jquery 在菜单中突出显示当前 url

    我有一个菜单 但我想突出显示当前与 jquery 的链接 var loc window location var lochref topNavigation li a attr href if lochref loc topNavigati
  • Yii 使用 ajax 进行分页

    我需要使用ajax启用分页 我的代码 控制器 更新内容ajax function actionIndex dataProvider new CActiveDataProvider News array pagination gt array
  • 正则表达式以任何顺序匹配查询中的所有单词

    我正在尝试为一个项目构建一个搜索功能 该功能根据用户搜索输入以及它是否与针对项目列出的关键字匹配来缩小项目范围 为此 我将项目关键字保存在data属性并使用 RegExp 模式将查询与这些关键字进行匹配 我目前正在使用这个表达式 我知道它不
  • 如何在响应ajax codeigniter后停止执行其他控制器

    我想知道如何在响应输出 json 数据后停止执行函数和涉及的其他控制器 就我这里的情况而言 我只是打电话test 函数于dashboard控制器 In dashboard构造函数将执行MY Login library In MY Login
  • 如何绑定div宽度/高度来形成字段?

    我想创建多个div我可以移动和调整大小 并绑定它们width height等到数组中的对象 因此 如果我创建六个 div 我的数组中有六个对象 每个对象都有 width height etc 我不太明白如何使用 knockout js 将输
  • jquery datatable ajax 无数据可用 mvc

    我有一张桌子是在 document ready功能 我还使用 jQuery DataTables 插件 由于某种原因 当页面加载时 ajax 调用控制器并返回数据并将其设置为我的网格所有获取的数据 但是尽管所有数据都加载到数据表中 但仍获取
  • 选择变量的嵌套元素 - jQuery

    我希望将变量传递给函数并让函数选择该变量中的元素 我不熟悉这种情况的语法 但是有人可以建议吗 例如 当在容器内单击按钮时 我希望将该容器存储在变量中 好吧 我有那部分 但后来我希望选择该容器中的某个元素 例如 container div e
  • 了解设置 JQuery 变量

    了解设置 JQuery 变量 最近 我通过在 StackOverflow 上遇到的另一个问题寻找帮助 了解到如何设置 JQuery 变量 如下所示 您可以通过简单地调用变量来创建输入字段 并且锚变量似乎也定义了样式 var clicked
  • Rails 4 可安装引擎,找不到文件“jquery”

    我正在创建一个 Rails 可安装引擎插件 它使用 gem jquery rails 我在 gemspec 文件中添加了这段代码 s add dependency jquery rails gt 3 0 1 and run bundle i
  • jquery.find() 可以只选择直接子项吗?

    我应该向 jQuery find 提供什么参数来选择元素子元素而不选择其他元素 我不能用 gt 引导选择器 而用 将选择所有后代 而不仅仅是直接子代 我知道 jQuery children 但这是一个库 因此用户能够提供自己的选择器 并且我
  • jQuery Mobile 表单验证

    我有一个移动网站 除了验证之外一切都工作正常 基本上我希望从用户那里获取值 然后在单独的页面 process php 上处理它们 但是 在这样做之前 我需要检查以确保字段已填充 我已经研究了几种方法来做到这一点 但似乎没有一种有效 我现在有
  • 如何判断 jquery 对话框是否打开? [复制]

    这个问题在这里已经有答案了 寻找通用案例解决方案来确定当前是否打开任何 jquery 对话框 有多个 试过 ui dialog content dialog isOpen true ui dialog dialog isOpen true
  • 如何获取给定 DOM 元素的所有定义的 CSS 选择器?

    如何使用 jQuery 获取给定 DOM 元素的所有定义的 CSS 选择器 定义后 我的意思是在应用于任何样式表的所有 CSS 选择器document 在某种程度上 这类似于 FireBug 实现的功能 其中显示所选 DOM 元素的所有应用
  • Jquery 验证不能正确验证数字?

    我在使用 jquery 非侵入式验证验证数字时遇到问题 我使用的版本是 ASP NET MVC 3 jQuery 1 9 1 jQuery 用户界面 1 10 1 JQuery 验证 1 11 0 我试图验证的输入是
  • JQuery 图像上传不适用于未来的活动

    我希望我的用户可以通过帖子上传图像 因此 每个回复表单都有一个上传表单 用户可以通过单击上传按钮上传图像 然后单击提交来提交帖子 现在我的上传表单可以上传第一个回复的图像 但第二个回复的上传不起作用 我的提交过程 Ajax 在 php 提交
  • 使用 Ajax 请求作为源数据的 Jquery 自动完成搜索

    我想做的事 我想使用 jquery 自动完成函数创建一个输入文本字段 该函数从跨域curl 请求获取源数据 结果应该与此示例完全相同 CSS 在这里并不重要 http abload de img jquerydblf5 png http a
  • Spring Rest 和 Jsonp

    我正在尝试让我的 Spring Rest 控制器返回jsonp但我没有快乐 如果我想返回 json 但我有返回的要求 完全相同的代码可以正常工作jsonp我添加了一个转换器 我在网上找到了用于执行 jsonp 转换的源代码 我正在使用 Sp

随机推荐

  • 干净的 XML 序列化分层、递归数据结构

    我有这门课 XmlRoot menuItem public class MenuItem XmlAttribute text public string Text get set XmlAttribute isLink public boo
  • 如何从QTableView中获取选定的行号?

    我是 QT 新手 我在用FrozenTabelWidget它源自于QTableView 如何获取选定的行号 如果索引发生变化 用户单击任何单元格 那么我需要获取该单元格行号 我的代码如下 freezetablewidget cpp incl
  • MVC4 / DotNetOpenAuth 中的自定义 OAuth 客户端 - 缺少访问令牌密钥

    我目前正在为我的应用程序实现 Dropbox OAuth 客户端 这是一个相当轻松的过程 直到我到达终点 授权后 当我尝试访问用户数据时 我会从 Dropbox 收到关于令牌无效的 401 消息 我在 Dropbox 论坛上询问 看起来我的
  • MySQL - 删除时外键在非空字段中设置为空

    这可能是一个微不足道的问题 但在外键约束方面我仍然有点笨拙 所以我想确定一下 假设我有一张桌子countries与田野country id PK 和name 和一张桌子cities与田野city id PK name and country
  • 同时移动2个表格

    我在这里有点卡住了 我试图同时移动 2 个表单 而不使用 OnMove LocationChanged Docking 等 与它们的位置交互的唯一方法是重写 WndProc 可能有帮助的是 表单 A 是表单 B 的所有者 因此 每当移动 A
  • 如何终止 PHP 会话?

    我正在编写一个社交网站 并且正在尝试找出 PHP 会话 在登录页面的顶部 我调用session destroy 在新用户正式注册为用户的页面和用户主页 我调用session start 当用户注销时 他们会链接到具有 session des
  • Reporting Services 将多个工作表导出到 Excel

    我目前正在构建一个 MS Reporting Services 报告 该报告可呈现为 Excel 我试图弄清楚如何设置报告 以便它在报告上创建数据的多个工作表 选项卡 据我所知 在报告中输入分页符会为您提供一个新的工作表 但是 有没有办法命
  • Javascript Array.prototype.filter() 不起作用

    我在客户端上运行这段代码来过滤事件列表 if res eventList filter function event const out res find function visibility return visibility ID e
  • 固件错误:Access-Control-Allow-Origin

    我正在调用 contextBroker 它给了我这个错误 Response to preflight request doesn t pass access control check No Access Control Allow Ori
  • 如何仅在Python中设置模块的日志记录级别?

    我在用logging info输出有关我的脚本正在执行的操作和我正在使用的信息logging basicConfig level logging INFO 启用此功能 和这个 logging basicConfig level loggin
  • 修改Python脚本批量转换目录下所有“WOFF”文件

    我一直在使用 GitHub 用户 hanikesn 见下文 编写的一个很棒的开源 python 脚本 该脚本通过命令行 Mac OS X 上的终端 将单个 WOFF 文件转换回 OTF 格式 现在 我将脚本拖放到终端 然后将 WOFF 文件
  • onActivityResult 中的 requestCode 错误

    我正在从我的片段开始一个新的活动 startActivityForResult intent 1 并希望在 Fragment 的父 Activity 中处理结果 Override protected void onActivityResul
  • 无法使用seaborn绘制双轴

    当我尝试在 jupyter 笔记本中使用 seaborn 绘制双轴图时遇到问题重要提示 该代码在 Python 2 上运行得很好 使用 anaconda 升级到 Python 3 后 我收到以下错误消息 Users enyi opt ana
  • 使用 GROUP 或 RANK 中的 WHERE 的 SQL 语句

    我有一份销售快照 内容大约是35 000 行 我们将这些列称为 Sales Rep Account ID Total Contract Value Date 我需要将所有内容分组Sales Rep然后从那里选择Sales Rep s 排名前
  • Underscore.js _.tap() 函数什么是方法链?

    Underscore js 文档解释说 tap 函数 点击 到方法链中 http underscorejs org tap 我很难遵循他们的例子 chain 1 2 3 200 filter function num return num
  • 如何在客户端导入socket.io - SOCKET.IO + NODE.JS

    我一直在尝试创建一个在线游戏 但是当我尝试使用socket on or socket emit 它会出现一个错误 如下所示socket 我看过一些与此类似的帖子 并尝试了所有解决方案 但没有一个有效 我已经得到了io connect 工作并
  • 导航栏和导航按钮中的单独标题

    嘿嘿 我有一叠UIViewControllers 位于 a 的内部UINavigationController 通常标题 或导航项的标题 决定导航栏中显示的标题 显示在顶部 and所有导航按钮 例如导航栏本身的后退按钮 现在 我计划在导航栏
  • 如何从 iOS 中的 UIMenuController 中删除默认的 UIMenuItem?

    我想从 UIMenuController 中删除一些默认的 UIMenuItem 对象 例如 剪切 复制 等 怎么做 Thanks 对显示菜单的视图进行子类化 例如UIWebView UITextView 并覆盖 canPerformAct
  • 用户设置 - 安卓

    如何使应用程序中的更改持续存在 以便当应用程序重新启动时所有设置保持不变 例如 如果从应用程序中我选择了振动 那么当应用程序未运行时 如果我的手机处于铃声模式 当应用程序重新启动时 它将自身设置为振动 实际上有多种方法可以持久保存更改 这安
  • 使用 jquery 可拖动和可点击的输入元素

    我在可拖动的 div 中有一个输入元素 我的代码应该做以下事情 当我拖动输入元素时 应该拖动整个可拖动 div 已完成 当我单击输入元素时 我应该能够编辑文本 无法完成 那么 有人可以告诉我如何单击和编辑可拖动的输入元素的文本吗 这是我的完