如何使用jquery用鼠标移动div?

2024-04-11

我需要能够用鼠标移动 div 并将 div 的新位置存储在数据库中以记住显示。我该怎么做?


我强烈建议你研究一下jQuery用户界面 http://jqueryui.com/以及可拖动的交互。基本上,您需要将代码添加到可拖动的 div 中(假设它具有 id="draggable"):

$("#draggable").draggable();

然后,将必要的行为放入停止事件中。更具体地说,你会这样做:

$('#draggable').draggable({
    stop: function(event, ui) { ... }
});

至于数据库存储,您可以在上述函数中使用 AJAX 调用,或者可以将其存储在页面中,这样某些表单发送或其他操作会导致位置信息传递到服务器并与其他信息内联存储数据。我对 AJAX 调用要小心,因为每次在每个浏览器上拖动时,您都可能会用位置数据轰炸您的数据库。取决于您的应用程序...

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

如何使用jquery用鼠标移动div? 的相关文章

  • 在 Javascript 中按日期对数组进行排序

    我在用着sort 按日期排序数组 elements data sort function a b return a date getTime b date getTime 问题是某些元素缺少日期 或日期无效 这导致了这个错误 无法读取属性
  • 窗口对象没有创建它的页面附加的属性

    我用window open url target 开一个url在新选项卡 窗口中 在此之前 我在新打开的窗口对象上设置了一些属性 目的是将数据从该页面 新窗口的创建者 传递到新创建的窗口 在除 Internet Explorer 之外的所有
  • 如何在CSS网格系统中偏移div列

    有谁知道抵消前两个div位于侧行且具有类的 scol 3 12偏移量为offset 6 12 and offset 9 12位于我的网格系统的右侧jsFiddle http jsfiddle net c6R6t CSS body font
  • 跨浏览器兼容音频有哪些选项?

    我正在使用这个功能 function playSound file MyAudio new Audio file MyAudio play 不幸的是 我正在努力寻找一种适用于所有浏览器的文件类型 Mp3 适用于 Chrome Safari
  • JavaScript 附加和前置与 jQuery 附加和前置

    QA Style 我最近读了一篇文章 里面说JavaScript已经实现了append and prepend受 jQuery 启发的方法 这对我来说是一个新知识 因为据我所知 要附加一个元素 我必须使用element appendChil
  • Rails:包括外部 JavaScript

    我想使用 JavaScript 库 例如 jQuery 插件 我是否使用 Rails 资产管道 或者我应该将其包含在 javascript include tag 中 我有哪些选择以及推荐的做法是什么 您会仅在几个页面上还是在整个应用程序中
  • 如何使用startsWith过滤并获取每个对象键的值?

    我试图通过获取每个键来过滤对象checkpoint并输出其值 目前 我只能输出键而不是值 下面 我有一个简单的对象 我正在使用过滤器和startsWith 我怎样才能得到这些值呢 var data practicals 0 checkpoi
  • 重定向后 HTML5 CORS 请求在 safari 中失败

    我正在使用 jQuery 制作 CORS 请求来完成 SSO 类型系统 用户登录 WordPress 同时使用钩子也登录 Moodle 我遇到的问题是 在 Safari 中 仅限 safari 7 当初始 POST 请求设置为 mudles
  • Karma 测试报告运行速度快,但实际上运行速度慢

    最好的解释是a video https youtu be Zwwi01JuPrQ 或参见下面的 gif 您会注意到 Karma 进度报告器报告测试只需要几毫秒 但显然需要相当长的时间 我在推特上提到了这一点 https twitter co
  • JS 中的 .Jar 文件

    有谁知道如何在 JS 中访问 jar 文件 我已经用 Java 创建了类并作为 jar 文件导入 我想从 JS 文件访问该类 大家好 我感谢你们所有人 我尝试在 Firefox XUL 中使用 JS 列出文件夹中的文件 但我做不到 然后我决
  • Javascript onclick隐藏div

    我想使用 javascript 隐藏这个警告 div 我的 javascript 正确吗 我想在单击关闭图标时隐藏 关闭 div images close icon gif div strong Warning strong These a
  • 添加 sigma.js 导航按钮

    我是 javascript 和 sigma js 的新手 我试图让导航按钮在画布中向上 向下 向左 向右滚动 就像发现的那样here http jcml fr jacomyal osdc2012 demo 到目前为止 我有一个简单的例子 我
  • 包括来自raw.github.com的js

    我有一个 github com 演示页面 链接到https raw github com master file js https raw github com master file js这样我就不需要总是复制 js文件转移到gh pag
  • 使用 puppeteer 部署 firebase 功能时说即使我启用了 --no-sandbox 也找不到 chrome

    我正在尝试将 firebase 函数部署到使用 puppeteer 的 firebase 项目 我让它在本地计算机上运行 但是当它尝试在 firebase 上运行时 我收到此错误 Exception from a finished func
  • RegisterClientScriptCode 在部分回发后不起作用

    以下代码行位于 SharePoint 网站的用户控件中 ScriptManager RegisterClientScriptBlock this this GetType jquery144 false ScriptManager Regi
  • 问号字符显示在文本中。为什么是这样?

    我有一个备份服务器 可以自动备份我的实时站点 包括文件和数据库 在实时站点上 文本看起来不错 但是当您查看它的镜像版本时 它会显示 在某些文本中 该文本存储在新闻数据库表中 这是实时服务器和镜像服务器上的屏幕截图 将其备份到镜像服务器的过程
  • 如何自动加载 Webpack 中给定目录中的所有 JSON 文件? [复制]

    这个问题在这里已经有答案了 编辑 有一个现有的问题 https stackoverflow com questions 29421409 how to load all files in a subdirectories using web
  • jQuery() 与 jQuery.parseHtml() 空格语法错误

    我有一行 javascript 导致 jQuery 中出现语法错误 document find Container replaceWith data find Content 代码本身如果相当无害的话 它所做的只是从 ajax 调用获取响应
  • gulp-uglify 不会保留文件顺序

    当我使用吞咽丑化 https github com terinjokes gulp uglify为了缩小 Javascript 文件 顺序变得混乱 可以说我让这个任务按预期工作 var gulp require gulp var renam
  • 根据对象内的值将对象数组分成两部分

    我一直在尝试 并努力 弄清楚如何根据键值对拆分对象数组 长话短说 我有一个火车正在停靠的车站列表 需要将之前的停靠点和未来的停靠点分开 我正在使用的数据如下所示 station code SOC station name Southend

随机推荐