jQuery Drop事件未触发
jQuery是一种流行的JavaScript库，用于简化HTML文档遍历、事件处理、动画效果和Ajax交互等操作。Drop事件是jQuery中的一个事件，用于在元素被拖放到目标区域时触发。
如果jQuery Drop事件未触发，可能有以下几个可能的原因和解决方法：
- 检查事件绑定：确保Drop事件已正确绑定到目标元素上。可以使用.on()方法或直接使用.on("drop", function(){})来绑定Drop事件。
- 检查元素属性：确保目标元素的draggable属性设置为true，以允许元素被拖放。
- 检查事件冒泡：Drop事件只会在目标元素上触发，而不是在其父元素上触发。确保目标元素没有被其他元素包裹或嵌套，以避免事件冒泡的问题。
- 检查拖放操作：确保在拖放操作中正确设置了数据传输和目标区域。可以使用event.dataTransfer对象来传输数据，并使用event.preventDefault()方法来阻止默认的拖放行为。
- 检查浏览器兼容性：某些浏览器可能对拖放事件的支持不完全。可以使用jQuery的事件对象event.originalEvent来获取原生的事件对象，并检查其支持的属性和方法。
对于jQuery Drop事件的更多信息和使用示例，可以参考腾讯云的jQuery文档：jQuery文档
相关·内容
2回答
我正在尝试捕获jsTree 3.0.0中的免打扰事件。我使用演示代码来构建事件处理程序。树构建得很好，但事件永远不会触发。我遗漏了什么？
这是相关的部分。JSON可以很好地工作，并构建自己的树find。但是，当我在树上拖放时，console.log调用永远不会发生。
<link href="/jquery/jquery-ui-1.10.3/css/ui-lightness/jquery-ui-1.10.3.custom.min.css" rel="Stylesheet"/>
<script src="/jquery/jquery-ui-
浏览 1提问于2014-04-30得票数 7
我在UWP的拖放功能中完成一项任务。我可以在父画布中拖放UI元素。但是如果我试图在画布之外删除UI元素，就不会得到任何事件。
尝试过使用PointerReleased事件，但不起作用。
有人知道要在拖放中捕获指针释放事件(包括触摸和鼠标拖动)吗？
谢谢
浏览 2提问于2020-01-29得票数 0
2回答
为什么这个jQuery在第一次被删除时就不掉了？
$(".drag").draggable({
revert: 'invalid',
drag: function(event, ui) {
$(this).addClass('valid');
}
});
$("#droppable").droppable({
accept: '.valid',
drop: function(event, ui) {
$('#droppable').text('droppe
浏览 4提问于2011-03-04得票数 4
回答已采纳
当我试图从我的日历中删除一个外部事件时，如果我添加了3个外部事件，然后将一个拖到垃圾箱，而不是只删除一个事件，它会删除所有事件(甚至是我正在进行的单独提要中的事件)。
你知道这是为什么吗，以及如何修复它？代码如下：
$(document).ready(function () {
//listens for drop event
$("#calendarTrash").droppable({
tolerance: 'pointer',
drop: function (event, ui) {
浏览 0提问于2012-06-22得票数 0
回答已采纳
1回答
这个问题的变体已经被问过了，但是答案都是不同的，有点过时，对我来说不起作用，所以我希望这是我遗漏的jQuery中语法规则改变的问题。
方案HTML：
<div id="theDroppable">Droppable</div>
<div id="theDraggable">Draggable</div>
<div id="theTrigger">Click to trigger a drop</div>
jQuery：
$( "#theDroppable" )
浏览 1提问于2014-01-22得票数 5
回答已采纳
我使用JQuery并使用切换函数来滑动ul li元素。但是我想要的是，如果有人点击外面(页面上的任何地方)，如果它处于切换状态，div将被关闭。我在这里分享我的代码为了更好的理解..。
$('#share-drop').click(function() {
$('#share-drop ul').toggle(300);
});
$('header .header-top .left-nav .share ul li').click(function(e) {
e.stopImmediatePropagation();
});
&l
浏览 0提问于2018-09-04得票数 2
回答已采纳
1回答
我有两个可丢弃的区域，其中一个在另一个里面。我希望能够只为内部区域捕获drop事件，并阻止传播，这样外部区域就根本不会得到它。有可能这样做吗？
<HTML>
<HEAD>
<TITLE>Layout Example</TITLE>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script>
<script type="text/javascript" src=
浏览 0提问于2014-07-30得票数 0
1回答
如果我想使div可拖动，那么我必须指定一个引用父元素?例如，在jquery中，当一个元素是可拖的时，它是否有一个引用父元素？
浏览 1提问于2016-05-29得票数 1
我只是在学习jquery，对于如何使我的信息多次出现和再现感到困惑吗？
$(".drop").hide();
$(".experience").click(function(){
$(".drop").show()
$(".experience").click(function(){
$(".drop").hide()
});
});
浏览 6提问于2014-06-16得票数 0
回答已采纳
在下面的小提琴中，当我将一个元素从可排序区域拖到可放区域，然后将它拖到可排序区域而不放它时，如果我将它拖到可放区域上，即使你没有松开鼠标单击，它也会得到一个拖放事件！在结果中，我得到了复制的元素:-)
这是一个合理的行为还是一个bug？
$('.sortable').sortable({
// https://bugs.jqueryui.com/ticket/8135 --> http://jsfiddle.net/petersendidit/gtKtE/277/
start: function(event, ui) { ui.placeholder.html
浏览 0提问于2018-07-05得票数 2
2回答
我正在尝试在我的自定义CMS上设置拖放导航创建者菜单。我想为这个事件创建一个回调函数。
div #links中有3个链接(只有<li><a href="#">Link</a></li>)
有一个名为div #dropzone的div。
我想要一个这样的回调函数：
$.("#dropzone").onDrop(function() { alert "Callback"; });
如何使用HTML5 (如果存在任何关于删除的新特性)和jQuery来实现这一点？一旦我被召回，我就可以自己做
浏览 3提问于2012-09-11得票数 0
回答已采纳
2回答
我有以下html：
<ul id="nav">
<li class="has-drop-down">
<a href="#" class="has-drop-down-a">Search</a>
<div class="drop" style="display: none;">
<ul>
<li>
浏览 3提问于2014-08-18得票数 0
回答已采纳
1回答
我正在制作下面的拖放示例的原型，除了无法触发drop事件之外，它可以完成我要求的所有操作。
元素只是还原而不粘贴到content div中。你知道我错过了什么吗
<ul class="keywords">
<li class="draggable" id="kw-1">keyword one</li>
<li class="draggable" id="kw-2">keyword two</li>
&
浏览 1提问于2011-08-05得票数 1
回答已采纳
1回答
我刚接触web编程，更不用说javascript和jquery了。但我需要创建一组draggable和droppable (每个都有10个项目)，并且能够识别和存储哪个draggable被放置在哪个droppable中。
假设我的id都是可以拖拽的(drag1，drag2，drag3...drag10)和可丢弃的ids (drop1、drop2、drop3...drop10)。
比如用户把drag1放到drop2上，把drag2放到drop3上，把drag3放到drop4...drag10上放在drop1上。
我需要将一对"drag1:drop2"，"drag2:dro
浏览 1提问于2014-03-06得票数 0
首先，它在文本输入中工作得很好：
jQuery('#edit-title').bind('drop', function() {
console.log('test jquery')
});
但是当我在CKEditor中测试它时，它不工作。我尝试了这两种方法，如下所示：
CKEDITOR.plugins.add('myplugin', {
init: function (editor) {
editor.on('contentDom', function (evt) {
$(editor
浏览 1提问于2013-05-17得票数 0
因此，这是一个单一的服务网站，想法是刷卡在该地区，你得到特定的信息，这取决于你如何与下垂的空间互动。我需要知道的是添加一个if 函数，该函数使用随机数变量来产生两个不同的函数。因此，每当out: function()执行时，要么得到消息：
“请再次点击本网站进入”
或
另一个函数发生在隐藏某些div并使其出现的地方。(我在我正在处理的代码片段中有一些代码，我认为这些代码非常接近)
我很抱歉，如果我的字典编码是关闭，我是非常新的这一点。谢谢你的建议。
$(function() {
$("#draggable").draggable({
containment
浏览 4提问于2017-02-13得票数 0
我在这里注意到-- --当你把红色的盒子拖到米黄色的盒子里时，它看起来就像红色的盒子在米黄色的盒子里，但是在HTML里它实际上变成了米色盒子的一个兄弟，只是得到了把它放在米色盒子上的补偿：
<body style="cursor: auto;">
<div id="box" class="ui-droppable"></div>
<div id="redBox" class="ui-draggable" style="position: relativ
浏览 0提问于2013-07-29得票数 0
回答已采纳
2回答
我试图在没有鼠标/用户交互的情况下手动“触发”一个拖放。
到目前为止，我已经能够设置用于拖放的jQuery UI ，但无法使用触发器()方法触发拖放。
有人能帮我安排一下吗？
到目前为止我的代码是：
$(function() {
$( "#draggable" ).draggable();
$( "#droppable" ).droppable({
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlig
浏览 4提问于2011-03-28得票数 14
1回答
我使用dc.js 构建了两个图表。对于标题中的第二个图表，您可以看到带有两个选项的下拉列表。选择后，图表将使用新数据重新绘制。在桌面上工作很好。然而，在移动平台上什么都没有发生。我使用以下方法：
HTML:
<div id='Line_chart_rate'>
<strong>Daily Price of a Dollar in </strong>
<select class = 'line-drop'>
<option id = 'RUB'>Ru
浏览 2提问于2015-05-02得票数 0
回答已采纳
1回答
我创建了一个表单，它具有“拖放”或“单击上传”文件的选项。当这两种情况中的任何一种发生时，我希望它触发一个动作。
当表单中的值发生变化时，我使用onchange事件触发一个操作。
$("#uploadform").on('change', function (e) {
e.preventDefault();
alert("Something Changed");
});
只有在我“点击上传”文件时才会触发。当我‘拖放’一个文件时，事件不会被触发。
当我“点击上传”或“拖放”发生时，如何触发相同的事件？
请在JQuery上发布答案
浏览 1提问于2015-11-17得票数 0
回答已采纳
我正在使用这个jQuery代码
$('input').bind('change mouseup', ... )
检测用户是否将文本拖到我的输入中，并更改它的值。但这似乎行不通。为什么它不工作，我怎样才能让它工作？
浏览 0提问于2011-09-01得票数 2
回答已采纳
1回答
我正在开发一个一页的网站。到目前为止，我成功地实现了‘垂直平滑滚动’功能(为我的家，关于，画廊.导航链接)，而且它工作得很好。
现在，我想添加另一个jquery到同一个网站-一个小的‘滚动’按钮，应该出现在右下角，以便更容易的导航。问题是它从来没有出现过？
以下是我迄今所做的工作：
HTML：
<a class="scrollup" href="#">Scroll</a>
CSS：
.scrollup {
height: 38px;
width: 38px;
opacity: 1.0;
position:fixed;
浏览 2提问于2013-08-25得票数 3
回答已采纳
1回答
我试图触发分页按钮从“鼠标点击”到“鼠标悬停”。这就是我试过的
jQuery('.esg-pagination-button').hover(function(){
jQuery(this).trigger('click');
});
但上面的代码只触发一次。
浏览 0提问于2018-11-16得票数 0
回答已采纳
我有一个简单的div，只有一个元素： <div id="drop-zone">
<input type="file" style="display: none;" multiple="multiple">
</div> 当我点击#drop-zone时，我想手动触发input。我试着这样做： jQuery('#drop-zone:not(input)').click(function() {
jQuery(this).find('input[type=&#
浏览 25提问于2019-03-10得票数 1
1回答
我知道这个问题，或者类似的问题，已经被问了很多次了，但是到目前为止，我还没有得到很好的答案。
我有这样的代码：
$(document).ready(function() {
$(".ta").keyup(function() {
if (this.value == "0") {
$("#div1").css("display", "block");
}
else {
浏览 2提问于2017-06-29得票数 0
回答已采纳
2回答
我想要检测用户是否选中或取消选中iframe中的复选框，并像这样设置一个标志。但它似乎并没有像预期的那样起作用。对代码中的错误有什么建议吗？
jQuery("#frameName").contents().find(":checkbox").bind('change', function(){
val = true;
alert("changed");
});
但是我可以通过使用以下命令来检测复选框是否被选中
var val = jQuery("#fr
浏览 3提问于2011-10-28得票数 15
回答已采纳
我在jquery ui对话框中使用。
所以基本上这就是发生的事情。我有一些可拖动的事件，用户可以拖到他们的日历。一旦在他们的日历上，他们可以点击该事件来加载一个对话框进行编辑。
这是一个jquery ui对话框，也是可拖动的。现在我发现，如果我移动jquery对话框(该对话框位于日历的正上方)，它将尝试将自己连接到日历上。当发生这种情况时，我有一个ajax请求，它会触发以保存可拖动事件的落地位置。
当然，因为这不是我所期望的那种事件，所以请求会失败并崩溃。
你有什么办法阻止这一切吗？
下面是一个示例文件，我对其进行了修改，以显示正在发生的情况。
将对话框拖放到日历上。
浏览 2提问于2011-07-23得票数 1
3回答
我尝试使用Jquery来更改表单中"select“输入的值，但当它更改时，该更改的函数就不起作用了。
HTML：
<select id='select'>
<option checked value='1' >Option 1</option>
<option value='2' >Option 2</option>
</select>
<div id='text'>Option 1 selected</div>
<
浏览 1提问于2017-08-17得票数 7
回答已采纳
我似乎在谷歌上找不到任何关于这方面的教程，但我在一些网站上看到人们这样做。
我正在尝试创建一个表单，在这个表单中，我的用户可以将产品拖放到他们的购物清单中，但是我不知道如何让jQuery UI的可拖放功能在拖放后设置特定表单字段的值。
浏览 0提问于2011-12-30得票数 1
回答已采纳
2回答
我需要删除一个类，并在jQuery中将它的名称更改为另一个名称，并且需要运行一个新类名的方法。
我的div在这里
<!-- Drag and Drop Area Start -->
<div class="tile instruments">
<div>
<article id="content">
<div id="drop-area" style="border: solid 1px; width: 100%; height: 800px;">
</div&
浏览 3提问于2015-01-15得票数 0
回答已采纳
1回答
仅在移动设备中关闭下拉菜单时遇到问题。有没有办法删除我之前添加的类？
在桌面上有一个Css悬停，在移动设备上可以点击。
谢谢你的回答。
$(document).ready(function(){
$('.drop_helper').on("click",function() {
$('.drop_nav').toggleClass('dropped');
$('.drop_helper').toggleClass('dropped_on').toggleClass('d
浏览 0提问于2016-06-30得票数 0
我正在使用html和jquery开发UI。我有一个html表，它有多个列，Product1和Product2列保存下拉列表。当用户在Description字段中输入文本时，我希望验证Product1和Product2字段。
现在使用下面的代码，我正在检查用户是否在下拉列表中为每一行Product1和Product2选择相同的值，并显示对话框弹出，上面写着"Product1和Product2不能有相同的值“。当用户在描述字段中输入文本时如何调用下面的逻辑，而不是当用户更改下拉list($("select").change..)时调用
示例代码：
$("select
浏览 0提问于2018-11-18得票数 0
回答已采纳
1回答
我有一个划分为6个网格的div。这些网格使用绝对定位进行放置。
由于某些原因，jQuery droppable不能在这些绝对div上工作。
有人能告诉我我的代码出了什么问题吗？
我创建了一个来显示我当前的代码。
这是jQuery部分。
$(".ui-draggable").draggable({
helper: 'clone',
cursor: 'move',
tolerance: 'fit',
stack: '.ui-draggable',
浏览 2提问于2015-06-03得票数 1
我正在尝试实现一个类似于gmail的文件上传系统，我已经完成了Fileupload / AJAX的所有问题，它工作得很完美。我唯一的问题是用户反馈。
例如..在gmail中，当你把一个文件拖到你的浏览器上(假设是IE9+用户)，会弹出一个区域，让你把文件放进去。我认为它是某种由框架(比如说Jquery)捕获的JavaScript事件，它允许我在拖放区域制作一些很酷的动画。
我的问题很简单..要执行此操作，我应该捕获什么事件？有什么想法吗？我做错了吗？
浏览 0提问于2012-01-31得票数 6
回答已采纳
我通过尝试和错误来自学自己，很多错误:)我被困住了。我使用的是fullCalendar，它在JSON提要中工作得很好。
我希望将外部事件拖到日历中，并根据拖动的事件显示不同的模式。事件拖放和模态显示是有效的，除了它的开放两个(假期的顶部修理)每次。
<div id="external-events">
<div id="vacationdrop" class="fc-event vacation" className="vacation">Vacation</div>
<div id=&#
浏览 1提问于2018-01-09得票数 2
回答已采纳
我正在使用jQuery UI的可排序小部件开发拖放工具。
我想在一个空的div中添加一条消息，可以将某些内容拖入其中，例如："drag here“。一旦div中有内容，我就想删除这条消息。有时页面加载的内容已经在div中，所以它不能只在action上，但onload也需要检查它。
我该怎么做呢？
下面是我的代码：
$("#divFrom, #divTo").sortable({
connectWith: '.connectedSortable'
}).disableSelection();
浏览 6提问于2011-02-18得票数 0
回答已采纳
3回答
当拖动和进入<div class="upload-cont">时，颜色从边框和文本的灰色变化到黑色，而当涉及到<span class="add-text">时，颜色又变回灰色。
CSS：
.upload-cont{
cursor:pointer;
margin-left:130px;
display:inline-block;
border:2px dashed #a8a8a8;
max-width:220px;
max-height:180px;
min-width:220px;
浏览 5提问于2013-01-13得票数 5
回答已采纳
我已经成功地实现了将jquery-ui元素拖到我的fullCalendar上。问题是，我想拖放到的不是日历本身，而是日历上显示的特定事件，以便将拖放的项目添加到事件中。缺少的部分是如何识别我放下时鼠标下的事件。
drop: function (date, allDay, jsEvent, ui)
{
var event = ???;
event.description += ui.helper.data("filters").text;
$('#calendar').fullCalendar('updateEvent', eve
浏览 0提问于2011-04-29得票数 2
可以使用jQuery的drop事件从桌面拖拽文件吗？
如果是，我如何获取丢弃的文件数据？
浏览 0提问于2012-03-03得票数 72
回答已采纳
我需要帮助理解在这里找到的jquery ui自动完成示例：
如果你点击源
$(function() {
function log( message ) {
$( "</div>" ).text( message ).prependTo( "#log" );
$( "#log" ).scrollTop( 0 );
}
$( "#birds" ).autocomplete({
source: "search.php",
浏览 0提问于2012-02-10得票数 3
回答已采纳
是否可以通过Meteor触发自定义事件？我发现触发自定义jquery事件不起作用，因为Meteor事件与jQuery ()是分开的。
所以如果我有这样的东西：
Template.foo.events({
'mouseenter .box, makeSelected .box': function() { ... }
})
如果我能做一些类似的事情，那就太好了：
Meteor.trigger($('.box')[0], 'makeSelected')
我目前的解决方法是将我想要的id作为data-id="{{_id}}"存储
浏览 1提问于2013-01-04得票数 6
回答已采纳
1回答
我在另一个父div中包含了div，它们都允许“丢弃”。
两个案件：
案例1:不允许发生Drop事件：
当我在子框中删除元素时，两个元素都执行dragleave事件，因此正确地删除了两个元素的红色类，但是没有执行drop。
案例2:允许丢弃事件(通过删除js代码中的注释)：
当我在子框中删除元素时，拖放事件不会被执行，并且我只删除子元素上的红色类(包含在" drop“事件侦听器中的代码)
问题:
在第2种情况下，如果我将元素放入名为div的子元素中，红色类仅在子div中删除，而不是在父div中删除。在不经过event.path对象的情况下，如何删除所有父类中的类？
下
浏览 3提问于2015-11-03得票数 0
我对jquery datepicker和计算函数有一些问题。当我填写每个字段时，函数会在"total day“字段中计算正确的值，但当我将日期更改为另一个字段时，"total day”值不会计算。
工作示例：
浏览 1提问于2012-07-23得票数 0
回答已采纳
在jquery UI拖拽效果中，如何找到被拖拽的拖拽效果？
$('#test').droppable({
drop: function (e,ui) {
//$(this) means the drop-container
//How can I use the "ui" parameter find the being draged one?
}
}
}
浏览 1提问于2012-03-09得票数 1
回答已采纳
1回答
我的网站上有jQuery。我也有一个youtube视频使用一个标准的对象/嵌入代码。我如何使用jQuery，以便当youtube视频播放完后，页面被重定向到一个新页面？
**编辑*
这是我在youtube上嵌入的内容：
<div id="embed_player">
<object id="embed_object" type="application/x-shockwave-flash" width="640" height="385" data="http://www.yout
浏览 2提问于2012-06-25得票数 0
回答已采纳
1回答
根据屏幕大小更改过渡类型
、、、
基本上代码应该做什么-如果网站大小大于750px，则下拉滑下悬停效果，但如果其小于750px的下拉工程点击切换。
我检查媒体查询是否已更改为(大于750px float == left)和(小于750px float == none)，如果我从650px网页宽度开始，它在单击切换时起作用，但当我将其调整为全屏，然后返回到650px时，它显示为悬停和单击切换，而不仅仅是单击切换。
谁能解释一下我做错了什么？我是jquery的新手。
提前感谢！
$(document).ready(function() {
checkSize();
$(window).resize(checkSiz
浏览 1提问于2016-04-09得票数 0
3回答
我在理解jQuery().change()行为方面有一些问题。
HTML基本上是大量的输入元素--复选框(每个复选框都带有id^='o99-post-visible-XXX'的ID )，它们都是纯CSS图像作为复选框，但这是不相关的)，我还有另一个复选框("#o99-check-all")来“选中所有”，还有一个文本输入字段('#o99-post-visible-ids')接收所选框的ID。
jQuery代码如下：
jQuery(document).ready(function() {
jQuery("#o99-check-al
浏览 2提问于2018-03-06得票数 1
回答已采纳
3回答
我想用jquery或javascript模拟拖放。
我必须在我想要模拟拖放的数据的地方。
<table class="dataTable table table-hover null table-cells dragDropTable table-draggable" id='tableListViewFields' data-testid='tableListViewFields'>
<thead>
<tr>
<th>Name<
浏览 1提问于2018-04-11得票数 1
回答已采纳
我有一个包含两个Jquery Mobile页面的HTML文件
<!-- Home Page -->
<div data-role="page" id="home">
<div data-theme="a" data-role="header">
<h1>FortiSizer</h1>
</div>
<div data-role="content">
<d
浏览 0提问于2012-10-25得票数 3
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
