使用基本 jQuery 框架进行拖放

2024-02-24

是否可以使用基本的 jQuery 脚本(不使用 jQuery UI)实现拖放?


在 HTML5 中,有一个名为“draggable”的属性。

<div draggable='true'>Drag me</div>
<div id='dropzone'>Drop it here!</div>

您可以利用以下事件:

var onDragEnter = function(event) {
    event.preventDefault();
    $("#dropzone").addClass("dragover");
}, 

onDragOver = function(event) {
    event.preventDefault(); 
    if(!$("#dropzone").hasClass("dragover"))
        $("#dropzone").addClass("dragover");
}, 

onDragLeave = function(event) {
    event.preventDefault();
    $("#dropzone").removeClass("dragover");
},

onDrop = function(event) {
    event.preventDefault();
    $("#dropzone").removeClass("dragover");
    console.log(event.originalEvent.dataTransfer.files);
};

$("#dropzone")
.on("dragenter", onDragEnter)
.on("dragover", onDragOver)
.on("dragleave", onDragLeave)
.on("drop", onDrop);

希望暂时有帮助。

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

使用基本 jQuery 框架进行拖放 的相关文章

  • 仅在 Chrome 上我收到此错误:Uncaught TypeError: Illegal constructor [关闭]

    Closed 这个问题是无法重现或由拼写错误引起 help closed questions 目前不接受答案 当我在 Chrome 上加载 jQuery 时 我会收到此错误 Uncaught TypeError Illegal constr
  • 如何设置必须输入特定数字的字段?

    我想知道如何创建一个需要输入特定数字或文本的字段 例如 激活码 以及在输入的确认答案的情况下移动到 网页 并且在未确认的情况下移动到 另一页面 的按钮 使用必需的属性
  • jquery 当前可见的第 n 个子级

    我可以像这样设置每 4 个 item div 的样式 jQuery item nth child 4n addClass fourth item 这工作得很好 但后来我隐藏了一些项目 显示了其他一些项目 并想重新做这个样式 但只对每第四个可
  • JSONP 使用 JQuery 从 HTTPS 协议获取 JSON

    我正在尝试获取从 https 安全站点发送的 JSON 客户端希望不要使用任何服务器端语言 全部都是 Javascript 我读到 当使用 Jquery 中的 ajax 函数时 我必须使用 JSONP 才能从安全站点加载 JSON 我的第一
  • 将 JSON 属性绑定到表单

    我有一个 JSON 对象和一个
  • 将一个文本框的值分配给另一个文本框

    看过类似问题的答案 但对于我的一生 我无法弄清楚我做错了什么 我有两个文本框和一个按钮 当文本添加到第一个文本框并按下按钮时 我想将第一个文本框的值 文本应用到第二个文本框
  • javascript setInterval 不适用于对象

    所以 我正在尝试创建一个 javascript 对象 并使用 setInterval 方法 这似乎不起作用 如果我删除引号 则该方法将运行一次 有什么想法吗 另外 我正在使用 Jquery Yacoby 和
  • 动态突出显示时向

    添加项目符号点?

    Update 例子 p Text Text p 在示例中 是否可以选择第二个 文本 单词 p 元素并单击按钮仅动态添加项目符号点到选定的 单词 有没有可能 在一个 p p Text p 突出显示从 p 元素并添加项目符号点到按钮上动态单击的
  • 简单 AJAX Get 请求“待处理”

    我正在尝试实现一个简单的 AJAX GET 请求 该请求告诉服务器删除数据库中的文档 虽然我从服务器得到文档已删除的确认 但 Chrome 检查器显示该请求处于 待处理 状态 最终导致服务器错误 我做错了什么 HTML div class
  • 如何使用 JavaScript 发布 ASP.NET MVC Ajax 表单而不是提交按钮

    我有一个使用创建的简单表单Ajax BeginForm Description br
  • jQuery Clockpicker afterHourSelect

    早上好 这是我在 stackoverflow 上的第一个问题 所以请怜悯 我正在使用jQuery 时钟选择器插件 https weareoutman github io clockpicker 对于某些形式 对于我的一些用户来说 时钟选择器
  • 根据复选框和数据元素隐藏/显示表格行

    我想隐藏表中的行 因为我选中了复选框并且该数据元素在表中不正确 另一个实验 我还可以使用数据元素进行排序并按下拉列表排序 查看 tr 标签 价格 名称 评级 吗 div class filter list div
  • Rails 4 使用 ajax、jquery、:remote => true 和 respond_to 渲染部分

    使用 AJAX 动态渲染页面以响应提交的表单似乎很常见 其他类似的问题都没有集中于如何以一般方式做到这一点 我能找到的关于这个主题的最好的博客文章在这里 http www gotealeaf com blog the detailed gu
  • 限制可选 DOM 复选框

    我试图限制用户可以选择的复选框数量 这些复选框是为数组中的每个项目生成的 DOM 输入对象 我目前对此没有运气 因此非常感谢任何帮助 谢谢 在这里小提琴 http jsfiddle net vVxM2 222 http jsfiddle n
  • 了解 sort() 比较函数

    我正在使用一个电子商务平台 该平台无法重新排序产品属性字段的选项 这真的很糟糕 因为要插入新选项 您几乎必须删除所有现有选项并重新开始 我正在尝试在客户端进行操作 这是我正在处理的内容 这是针对鞋码的 9 EE 9 1 2 EE 10 EE
  • 如何向 jquery-file-upload basic-plugin 添加取消上传按钮

    我正在使用 jquery file upload 和 Rails 4 我从https github com tors jquery fileupload rails paperclip example https github com to
  • 在 jQuery 可排序中对多个选定项目进行排序?

    我试图在 jQuery 可排序集中选择多个项目 然后将选定的项目一起移动 这是我的弱点开始尝试使其发挥作用 http jsfiddle net benstenson CgD8Y 这是代码 HTML div class container d
  • 获取点击的的DOM路径

    HTML div class lol a class rightArrow href a div 伪代码 rightArrow click function rightArrowParents this dom dom is the pse
  • 禁用特定 div 上的 Tab 键

    我有以下结构 div div Some content div div Some content div div 我想 禁用 div2 上的 tab 键 我的意思是按下 tab 键时 div2 的元素不会获得焦点 有没有简单的方法可以使用
  • 在 PHP 中模拟 jQuery.ajax 请求

    我必须在 PHP 中模拟 AJAX 请求 就像在 jQuery 中一样 我当前的代码在这里 原始 AJAX 调用 不得修改 ajax type POST url someFile php data data success function

随机推荐

  • 在 iTunes Connect 中更改新应用程序版本号

    我相信我设法让自己在 iTunes Connect 中陷入某种奇怪的僵局 我有一个应用程序 当前版本为 2 14 写完更新后 我决定将新版本编号为2 2 iTunes Connect 允许我做到这一点 当我尝试验证新版本时 它告诉我在 iT
  • 难以理解捕获组和反向引用

    为了整理我对正则表达式的了解 我决定阅读一本关于它们的书 正则表达式简介 我知道这很愚蠢 但其中一个介绍性示例对我来说没有意义 d d 1 示例文本 123 456 7890 应该捕获第一个数字 123 谁能解释一下这里发生了什么 据我所知
  • 批量-通过输入更改帐户密码

    我想在启动时创建一个批处理文件 要求用户更改当前的管理员密码 Step 1 User logins Step 2 Batch file runs displaying message Please change Administrator
  • React - 身份验证过程:无法在调度过程中调度

    我已经开始通过flummox react bootstrap 和react router 来玩react 我正在尝试为我的网站创建一个基本的同构 CMS 语境 在身份验证方面 每个用户都有一个功能列表 每个组件都使用我的身份验证存储 可以
  • 如何在IOS中更新App文件(html)?

    我的应用程序非常简单 我有一些带有 html 文件名的 plist 当用户选择一行时 webview 会加载该 html 文件及其内容 我很好奇如何进行应用程序更新 例如 我有一个新的更新的 html 文件 并进行了更正 我希望用户通过单击
  • 如何在NTVS(Node Tools for Visual Studio)中使用nodemon

    我在 Visual Studio Professional 13 上使用 Node 很快意识到每次代码更改都需要重新启动服务器变得很麻烦 所以我做了一些研究 发现大多数人使用nodemon来自动刷新他们的服务器 尽管在线教程使用命令行使用n
  • 触摸屏摇杆算法

    我想在触摸屏上模拟模拟操纵杆 如下图所示 当摇杆区域中心设置为 cx cy 时 如何计算触摸位置 tx ty 的X方向比和Y方向比 1 0 1 0 x 方向的比率为 tx cx r 其中 r 是圆的半径大小 类似地 y方向比率为 ty cy
  • 使用服务帐户从python调用Google Cloud Function进行身份验证

    我有一个触发器类型设置为 HTTP 的云函数 并且还有一个有权调用云函数的服务帐户 我想从 python 脚本调用云函数 我使用以下脚本来调用该函数 from google oauth2 import service account fro
  • jQuery 验证复选框是否需要选中?

    我正在使用 jQuery 验证插件来验证表单 问题是我找不到一种方法来验证表单中的单个复选框是否被选中 HTML 标记
  • 从 csv 生成树结构

    我已经为这个问题摸不着头脑有一段时间了 我基本上试图从一组 CSV 数据生成树层次结构 CSV 数据不一定是有序的 这就像下面这样 Header Record1 Record2 Value1 Value2 Row A XX 22 33 Ro
  • 在 Heroku 上使用 MySQL 和 PHP

    如何将 MySQL 数据库上传到 Heroku 以与 PHP 应用程序一起使用 我在 Heroku 上找到的唯一文档是 将 ClearDB 与 PHP 结合使用 从 PHP 连接到 ClearDB 非常简单 只需要解析 CLEARDB DA
  • 如何增加全日历中两个事件之间的间距

    我想增加完整日历月视图中两个事件之间的空间 您需要修改事件的 css 元素事件渲染函数 http arshaw com fullcalendar docs event rendering eventRender 你可以像这样实现事件之间的间
  • 如何使用java / spring将图像存储到redis

    我在图像上传服务器上使用 redis 和 spring 框架 我需要将图像存储到redis 我发现了以下问题 但它是针对 python 的 如何使用 python PIL 将图像存储到 redis 中 https stackoverflow
  • 如何在asp.net中使用javascript设置下拉列表框的可见true和false

  • 无法读取 Android 调试密钥

    尝试构建我的应用程序 10 分钟前我可以毫无问题地构建该应用程序 但突然开始出现此错误 What went wrong Execution failed for task app packageDebug gt Failed to read
  • Android - 将用户发送到 Activity 的 GCM 推送通知不会导致 onCreate 调用

    我能够创建推送通知 并将用户发送到我想要的任何 Activity 但我注意到每当用户登陆该 Activity 时 onCreate 函数都不会被调用 应该是这样吗 如何设置才能调用Activity的onCreate 这是我的活动 publi
  • 私有方法 Jasmine 单元测试

    我正在使用 jasmine 为角度应用程序编写测试用例 但许多内部方法在服务中被声明为私有方法 Example App service productDisplay function var myPrivate function do st
  • CocoaPods 找不到 pod“Firebase/Everything”的兼容版本

    当我尝试在 iOS 中运行 React Native 应用程序时 出现此错误 CocoaPods could not find compatible versions for pod Firebase Auth In Podfile Fir
  • `npmpublish` 和 `npminstall` 失败取决于使用的 `.npmrc` 语法

    当前行为 我正在尝试配置项目以安装来自 NPM 的依赖项 我将把项目作为私有包发布到 GitHub Packages 如果我在我的项目中使用这个语法 npmrc my org registry https npm pkg github co
  • 使用基本 jQuery 框架进行拖放

    是否可以使用基本的 jQuery 脚本 不使用 jQuery UI 实现拖放 在 HTML5 中 有一个名为 draggable 的属性 div Drag me div div Drop it here div 您可以利用以下事件 var