将 DIV 转换为单击并拖动视口

2024-05-10

有人知道一种不显眼的、基于原型或无框架的方法将具有大内容(例如地图)的 DIV 转换为具有固定尺寸的可点击和可拖动的“地图”容器,非常像 Google 地图?

我想在大型输入表单中显示 HTML 块。这些块可能会超出可用空间(每个块可以有大约 150x300 像素的视口)。单击并拖动解决方案将是完美的移动方式。我当然可以使用溢出:自动,但在这种情况下这不是一个方便的移动方法。


看看以下内容:

http://www.switchonthecode.com/tutorials/javascript-tutorial-draggable-view-in-a-container http://www.switchonthecode.com/tutorials/javascript-tutorial-draggable-view-in-a-container

它至少可以为你指明正确的方向

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

将 DIV 转换为单击并拖动视口 的相关文章

  • 响应式图像 - srcset 和尺寸属性 - 如何正确使用两者:基于设备像素比和基于视口的选择一起?

    到目前为止 我经常读到这个问题 并且它也发生在我自己的项目中 这里介绍一下我到目前为止所发现的关于 srcset 和 size 属性的内容 关于如何使用有两种不同的可能性srcset 属性 来源 w3c http w3c github io
  • 如何将内联 JavaScript 与 Express/Node.js 中动态生成的内容分开?

    对于具有几年 Web 开发经验但没有找到答案的人来说 这是一个有点菜鸟的问题程序员堆栈交换 or Google 我决定在这里问一下 我在用Express网络框架Node js 但这个问题并不特定于任何 Web 框架或编程语言 以下是从数据库
  • 防止 iOS 键盘在 cordova 3.5 中滚动页面

    我正在使用 Cordova 3 5 和 jQuery mobile 构建 iOS 应用程序 我在大部分应用程序中禁用了滚动功能 但是 当我选择输入字段时 iOS 键盘会打开并向上滚动页面 我不想要这个功能 由于输入足够高 键盘不会覆盖它 我
  • 将 GMT 时间转换为当地时间

    我以这种格式从我的服务器获取 GMT 时间 Fri 18 Oct 2013 11 38 23 GMT 我的要求是使用Javascript将此时间转换为本地时间 例如 如果用户来自印度 首先我需要采用时区 5 30并将其添加到我的服务器时间并
  • 尝试将数据存储在点击器网站中

    我正在尝试存储一个名为的变量score无论何时刷新 您都会一次又一次地使用它 我不明白的是它的代码是什么 我尝试了一些方法 但似乎都不起作用 这是我的答题器网站 但是当我尝试使用 JavaScript 来存储它时 它不起作用window o
  • 如何制作没有 ng-repeat 的模板并使用 Angular-drag-and-drop-lists 将数据传递到 $scope?

    我想用角度拖放列表 https github com marceljuenemann angular drag and drop lists使用我自己的网格模板到所见即所得编辑器 如何构建我自己的 HTML 模板而不需要ng repeat因
  • 网站的主体和元素固定在 980px 宽度上,不会缩小

    我试图在 Rails 应用程序顶部启动前端 仅 HTML CSS 页面 但在使用 320px 视口时遇到问题 有些元素不会按比例缩小 我不明白为什么 我已经完成了检查元素 为各种元素提供了max width 100 and or width
  • Javascript split 不是一个函数

    嘿朋友们 我正在使用 javascript sdk 通过 jQuery facebook 多朋友选择器在用户朋友墙上发布信息 但是我收到此错误friendId split 不是函数 这是我的代码 function recommendToFr
  • 检查 jQuery 1.7 中是否存在基于文本的选择选项

    所以我有以下 HTML 片段
  • 将 UMD Javascript 模块导入浏览器

    你好 我正在对 RxJS 进行一些研究 我可以通过在浏览器中引用它来使用该库 如下所示 它使用全局对象命名空间变量 Rx 导入 我可以制作可观察的东西并做所有有趣的事情 当我将 src 更改为指向最新的 UMD 文件时 一切都会崩溃 如下所
  • Firebase 函数 onWrite 未被调用

    我正在尝试使用 Firebase 函数实现一个触发器 该触发器会复制数据库中的一些数据 我想观看所有添加的内容votes user vote 结构为 我尝试的代码是 const functions require firebase func
  • 从数据库检查数据的异步解决方案各种循环子句

    我想要做的是异步检查数据库并从中获取结果 在我的应用程序中我试图实现Asynchronously将此步骤解决为 从数据库中检查手机号码JsonArray循环子句的种类 Create JsonArray从结果 打印创建的数组 我学到了足够多的
  • 对于只触及我的工作表的 Google 表格脚本,收到“此应用程序未经验证”

    我正在编写一个 Google Sheets 脚本 我只想访问与 gs 文件关联的同一电子表格中的数据 似乎我应该有权在自己的电子表格中运行脚本 但是每当我运行一个函数时 我都会得到一个This app isn t verified信息 我该
  • 如何使用 crypto-js 解密 AES ECB

    我正在尝试将加密数据从 flash 客户端 发送到服务器端的 javascript 在 asp 中作为 jscript 运行 有几个 javascript Aes 库 但它们实际上没有文档记录 我正在尝试使用 crypto js 但无法让代
  • 在 Shopify 商店中嵌入 Vue 组件

    在产品页面中 我尝试显示自定义 Vue 组件 为简洁起见 该组件根据给定的产品 ID 显示 Firebase 数据库中的一些信息 我最初尝试将其制作为 Shopify 应用程序 以便我可以访问他们的 API 我实现了 OAuth 并且可以检
  • 带参数的事件监听器

    我想将参数传递给 JavaScript 中的事件侦听器 我已经找到了解决方案 但我无法理解它们为什么或如何工作以及为什么其他解决方案不起作用 我有 C C 背景 但是 Javascript 函数的执行有很大不同 您能否帮助我理解以下示例如何
  • Javascript Replace() 和 $1 问题

    我正在尝试创建一个脚本来搜索文本中的模式并在它找到的字符串周围包裹一个标签 shop attributes td each function this html function i html return html replace E 0
  • JavaScript 相对路径

    在第一个 html 文件中 我使用了一个变量类别链接 var categoryLinks Career prospects http localhost Landa DirectManagers 511 HelenaChechik Dim0
  • 在 Nexus 7 2013 上更改方向时 CSS 媒体查询不起作用

    我目前正在我的笔记本电脑 台式电脑和 Nexus 7 2013 上测试 CSS 媒体查询 除了 Nexus 7 之外 它们在台式机和笔记本电脑上都运行良好 当我更改方向时 除非刷新页面 否则样式不会应用 例如 以纵向模式握住设备时 页面正常
  • 如何在react-highcharts中使用图表工具提示格式化程序?

    如何使用图表工具提示格式化程序 我正在使用高图表的反应包装器 我有这样的配置 const CHART CONFIG tooltip formatter tooltip gt var s b this x b each this points

随机推荐

  • MPAndroidChart StackedBarChart 显示值但不显示条形图

    我开始使用MPAndroidChart https github com PhilJay MPAndroidChart图书馆来建立一个StackedBarChart显示三个 y 值 这是代码 public class Plot final
  • getViewByID 对于 Listview 返回 null

    我的 main xml 如下
  • jquery ajax 发送到 MVC 控制器时不断收到 400(错误请求)

    我的 ajax 调用看起来像这样 ajax actually approve or reject the promotion url url type POST data data PromotionId data UserId data
  • 仅针对某些异常类型中断

    我知道异常处理是一件非常重要的事情 我们在所有项目中都在这样做 主要原因是记录客户发生的错误 这工作正常 根本不是问题 但是 当我仍在使用 Visual Studio 编码和运行应用程序时 我根本不需要任何异常处理 我希望调试器正好停在应用
  • C 中的双重否定:是否保证返回 0/1?

    Is x 标准保证返回0 1 请注意 我是not询问 C 其中定义了 bool 类型 是的 在 C99 中 请参阅 6 5 3 3 4 逻辑非运算符的结果 是0如果其操作数的值比较 不等于0 1如果其操作数的值比较等于 0 结果具有类型in
  • 如何在一行中输出多个变量

    我试图确定 CSV 中的用户是否处于活动状态 此外 我想知道它们是否是服务帐户 用户帐户或基于 OU 的计算机帐户 一切都在膨胀 直到我尝试输出它 输出分为几行 每个变量一行 我希望输出在一行上 中间有逗号 这样我完成后就会有一个 CSV
  • 关闭旧的 php websocket

    我在用PHP Websockets https github com ghedipunk PHP Websockets创建一个简单的聊天服务器 当我第一次运行在我的服务器上创建 websocket 的 php 脚本时 一切正常 如果脚本由于
  • 如何从 IOS 应用程序中的自定义捆绑包加载故事板文件?

    我有一个 ios 应用程序 我正在修改它 以便它可以作为静态库简单地插入到一系列其他应用程序中 但是 我还需要拥有所有相应的资源 因此我创建了一个自定义捆绑包来包含这些资源 该捆绑包包括所有选项卡栏图像 可本地化字符串 默认图像 以及对于这
  • 使用正则表达式解析日志文件

    我目前正在为我们的内部日志文件 由 log4php log4net 和 log4j 生成 开发一个解析器 到目前为止 我有一个很好的正则表达式来解析日志 除了一个烦人的一点 一些日志消息跨越多行 我无法正确匹配 我现在的正则表达式是这样的
  • facebook og:image 不会从与 URL 相呼应的 php 文件中获取图像

    facebook OG 从回显 URL 获取图像 这可能吗 因为我包含了一个 php 文件 它将回显图像 URL 但是当我签入共享调试器时 内容为空 我的元标签 gt 和 php 文件
  • 没有设备的设备驱动程序?

    我正在创建一个需要使用一些内核级模块的应用程序 为此我将应用程序分为 2 个 一个用户级程序和一个内核级程序 在阅读了有关设备驱动程序并浏览一些教程后 我有点困惑 是否可以存在没有任何特定设备与之关联的设备驱动程序 除了设备驱动程序 内核代
  • google.maps.Geocoder.geocode() Geometry.location lat/lng 属性名称经常更改

    我有一个应用程序 我正在使用 Google Javascript 地理编码 API 来获取地址的纬度 经度 代码是这样的 geocoder new google maps Geocoder geocoder geocode address
  • 如何修复此 YCrCb -> RBG 转换公式?

    我使用的公式来自这个问题 https stackoverflow com questions 8838481 kcvpixelformattype 420ypcbcr8biplanarfullrange frame to uiimage c
  • 作为服务运行时未找到 PowerShell 模块

    我有一个项目 我将 Office 365 许可证分配给用户 有一个 Web 项目允许管理员查看可用许可证并为用户选择许可证 在后台 有一项服务每 15 分钟执行一次实际的许可证分配 以及许多其他任务 我们不直接分配许可证的原因是用户可能尚未
  • 我们什么时候应该在.NET中使用NativeMemory.Alloc()? [关闭]

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 NET6 C 引入NativeMemory类 但我不知道什么时候应该使用NativeMemory Alloc 而不是普通的数组实例化
  • 这可能是因为 cuDNN 初始化失败,因此请尝试查看上面是否打印了警告日志消息。 [操作:Conv2D]

    我在 anaconda 中安装了 TensorFlow GPU 2 0 当我安装它并导入包 然后运行我的 CNN 模型时 它工作正常 但当我尝试运行训练模型时 出现错误 这是我的错误报告 Epoch 1 50 UnknownError Tr
  • .class 与 .java

    class 文件和 java 文件有什么区别 我正在尝试让我的小程序工作 但目前我只能在 Eclipse 中运行它 还不能嵌入 HTML 谢谢 编辑 那么如何使用 JVM 进行编译呢 class 文件是编译后的 java 文件 java 都
  • Android - 测试另一个活动是否已开始

    我正在尝试测试以下场景 在自动完成文本视图中输入一个字母 向下滚动并选择其中一个选项 然后单击一个按钮 单击按钮将启动一个新活动 我想检查新活动是否已经开始 这是测试方法 public void testSpinnerUI mActivit
  • Android 上的 Jetty 上的 Jersey 抛出 ContainerException:“不存在 WebApplication 提供程序”

    我正在尝试在 Android 上的 Jetty 上运行 Jersey 我创建了一个 Android 它使用 Jersey Servlet 实例化 Jetty 服务器 无论如何 当我启动 Jetty 并访问 REST 资源时 在我的例子中 h
  • 将 DIV 转换为单击并拖动视口

    有人知道一种不显眼的 基于原型或无框架的方法将具有大内容 例如地图 的 DIV 转换为具有固定尺寸的可点击和可拖动的 地图 容器 非常像 Google 地图 我想在大型输入表单中显示 HTML 块 这些块可能会超出可用空间 每个块可以有大约