使用基本 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 框架进行拖放 的相关文章

  • 在特定页面上执行 javascript 的正确“Rails”方式

    我试图在特定页面上运行 javascript 而我唯一的解决方案似乎是反模式 我有controller js内部生成的assets javascripts 我在用着gem jquery turbolinks 我的代码类似于以下内容 docu
  • 从 HTTP 登录到 HTTPS

    我的网站默认使用 HTTP 我确实有一个启用 HTTPS 的证书 但只有其上的某些区域强制建立安全连接 登录是通过 Ajax 处理的 我想开始使用 SSL 即使请求来自 HTTP 我尝试强制请求的地址具有 HTTPS 并且它完美地回复 然而
  • 按下回车键时不刷新页面

    我遇到了一些问题 只要表单中有输入 回车键就会触发页面刷新 下面的代码 如果按下回车并且文本区域 input 中没有输入任何文本 则不会刷新页面 但是如果按下回车并且 input中有输入或者光标位于文本区域 我不确定是什么触发了它 因为 s
  • Javafx 拖放 TabPane

    我 在 JavaFx 应用程序中 有一个带有不同选项卡的选项卡 我想实现拖放功能以将选项卡拖到舞台之外 这样它就可以生成一个新窗口 就像在 Google Chrome 中一样 谢谢您的帮助 您应该检查 Tom Schindl 在他的网站上显
  • PHP 数组通过 JSON 转为 jquery 数组

    我有点困惑为什么以下不起作用 get php
  • 编辑第一个选项名称

    我有以下我无法访问的代码 我想要做的是将一些文本添加到现在为空的第一个选项中 诸如 选择地址 之类的文本
  • 覆盖 jQuery 验证 MVC4 中的默认设置

    要覆盖查询验证插件 请在文件 http docs jquery com Plugins Validation validate toptions 推荐的方式是 selector validate invalidHandler functio
  • 将数组从 jquery ajax 传递到代码后面

    我必须将二维数组传递给在asp net网页代码后面编写的页面方法我有一个变量objList作为二维数组 我使用以下代码来实现此目的 但没有成功 并且未调用页面方法 脚本语言 function BindTable objList ajax u
  • jQuery - 找不到函数?

    有人可以解释一下为什么下面的代码会抛出错误吗 JavaScript Document document ready function port box css display none ul portfolio li a bind clic
  • jQuery mousemove 性能 - 节流事件?

    我们面临着与 mousemove 连接的 jQuery 事件传播性能问题 我们有一个屏幕填充画布 需要跟踪用户是否在其上拖动鼠标 因此我们在该对象上添加了一个鼠标移动侦听器 如下所示 ourCanvas on mousemove funct
  • 用户脚本 - 有没有办法将 jquery 代码注入 angularjs dom?

    所以我正在尝试为一个网站创建用户脚本 我无法更改网站的任何源代码 因为它不是我的 网站到处都使用 AngularJS 控制器 我研究了几天如何做到这一点 但没有成功 所以我尝试注入代码 nav after div test div 当我通过
  • 更改 yii 中注册脚本文件的顺序

    我正在为 Yii 应用程序制作一个小部件 主布局视图注册了所有常见的脚本文件 例如 jQuery 和 jQueryUI 在我的小部件中 我想使用依赖于已加载的 jQueryUI 的 jQueryUI 插件 我知道我可以指定脚本包含在页面上的
  • Masonry - imagesLoaded - 不是函数

    Masonry and imagesLoaded应加载并正常工作 已经制作了一个类似的网站 并且可以正常运行 我不知道我的问题出在哪里 所以我希望你能看到问题所在 应该是少了点什么 在 Chrome Inspect 中 我收到以下错误 Un
  • ajaxChosen 插件将无法工作

    我整个下午都在摆弄 ajaxChosen 因为我喜欢 Chosen 但我的选项值集变得太大了 我也尝试过 select2 但它太慢了 http harvesthq github io chosen http harvesthq github
  • Ajax 表单从 Jquery 对话框内重定向页面

    我在部分视图中有一个 jquery 对话框 model JQueryDialogPoc Models FeedBack using Ajax BeginForm GiveFeedback Home null new AjaxOptions
  • 如何格式化 Highcharts 的 (x,y) 对数据的日期时间

    我的序列化方法会产生如下所示的日期时间字符串 2014 07 09T12 30 41Z 为什么下面的代码不起作用 function container highcharts xAxis type datetime series data x
  • 按搜索值过滤元素 - 多个单词

    我有一个由 DIV 和 INPUT 搜索框组成的列表
  • JQuery Mobile 与 MVC 的链接

    我正在使用 ASP NET MVC 3 和 Razor UI 设置 JQuery 移动网站 我正在生成我的链接 例如 a href See Group 2 a 假设我从 Home Index 访问它 我遇到的问题是 当我点击链接时 它会出现
  • Javascript split 不是一个函数

    嘿朋友们 我正在使用 javascript sdk 通过 jQuery facebook 多朋友选择器在用户朋友墙上发布信息 但是我收到此错误friendId split 不是函数 这是我的代码 function recommendToFr
  • 在 CKEditor 中设置字体大小和字体系列

    我正在使用 ckeditor 我想问一下这个插件如何设置font family和font size 我尝试过使用 CKEDITOR config font defaultLabel Arial CKEDITOR config fontSiz

随机推荐

  • 在 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