jQuery 可拖放“over”当鼠标位于可拖动上方时,事件不会触发
我有一个任务列表,所有任务都可以拖放。它们都有一个“over”事件处理程序,以确保当另一个任务悬停在它们上方时它们会亮起。
这并没有完全按照我想要的方式工作。当我开始拖动一个任务时,其他任务不会按预期亮起,除非鼠标实际上不在可拖动助手上方(这是可能的,因为我已指定 axis='y',以便我可以移动光标助手的左侧和右侧,而不中断拖动会话)。
我认为问题可能是我拖动的任务也是可放置的,所以我指定一旦拖动它,就必须禁用其可放置性。
那么为什么在可放置目标上放置可拖动助手不会触发 over 事件,而将光标放置在可放置目标上却会触发该事件呢?
这是代码:
$(mySubtasks).each(function(){
var _this = this;
$(_this).draggable({
axis: 'y',
containment: '#plannerTab',
disabled: true,
revert: 'invalid',
start: function(e, ui){
currentlyDragging = true;
$(_this).droppable('disable');
$('#messageArea').text('Currently dragging');
$(_this).css('position', 'absolute');
},
stop: function(e, ui){
currentlyDragging = false;
returnToSortableTasklist();
$(_this).css('position', 'relative');
}
});
$(_this).droppable({
accept: '.subtask',
disabled: true,
drop: function(e, ui){
setTimeout('currentlyDragging = false;', 1000);
alert('Dropped something legal on a subtask');
//Deactivate all draggable/droppable and reinstate sortable
returnToSortableTasklist();
},
over: function(e, ui){
$(this).addClass('dragdropTargetHover');
$(ui.helper).addClass('dragdropHelperHover');
},
out: function (e, ui){
$(this).removeClass('dragdropTargetHover');
$(ui.helper).removeClass('dragdropHelperHover');
}
});
I have a list of tasks that are all draggable and droppable. All of them have an 'over' event handler to make sure they light up when another task is hovering over them.
This is not working fully as I want it to. When I start dragging one task, the other tasks don't light up as expected, except when the mouse is not actually above the draggable helper (this is possible because I have specified axis='y', so that I can move the cursor left and right of the helper without breaking the drag session).
I thought the problem might be that the task I'm dragging is also droppable, so I specified that once it is being dragged, its droppability must be disabled.
So why does having a draggable helper over a droppable target not trigger the over event, while having the cursor over the droppable target does trigger that event?
Here's the code:
$(mySubtasks).each(function(){
var _this = this;
$(_this).draggable({
axis: 'y',
containment: '#plannerTab',
disabled: true,
revert: 'invalid',
start: function(e, ui){
currentlyDragging = true;
$(_this).droppable('disable');
$('#messageArea').text('Currently dragging');
$(_this).css('position', 'absolute');
},
stop: function(e, ui){
currentlyDragging = false;
returnToSortableTasklist();
$(_this).css('position', 'relative');
}
});
$(_this).droppable({
accept: '.subtask',
disabled: true,
drop: function(e, ui){
setTimeout('currentlyDragging = false;', 1000);
alert('Dropped something legal on a subtask');
//Deactivate all draggable/droppable and reinstate sortable
returnToSortableTasklist();
},
over: function(e, ui){
$(this).addClass('dragdropTargetHover');
$(ui.helper).addClass('dragdropHelperHover');
},
out: function (e, ui){
$(this).removeClass('dragdropTargetHover');
$(ui.helper).removeClass('dragdropHelperHover');
}
});
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
还有其他因素也在干扰:当被拖拽时,帮助者的身体相当小。我确保在可拖动开始时将它们设置为一个合适的大小,以便我拖动它们的可放置对象很容易“检测到”它们。
And something else was interfering too: when dragged, the helper was physically rather small. I made sure to set them a nice size on start of draggable, so that they would easily be 'detected' by the droppables over which I was dragging them.
我发现我的“drop”甚至总是被触发,即使我的“over”事件没有 - 特别是当我将对象拖动到靠近被拖动对象的另一个对象时。调整助手大小的建议对我来说不起作用,但让我尝试了其他属性。我惊讶地发现,当我增加滚动灵敏度时,我的问题就消失了。也就是说,因为我的可拖动区域非常大(水平),所以我设置了scroll:true和scrollSensitivity:160。当我将滚动灵敏度增加到 400 时,我的问题就消失了。
I found that my "drop" even always triggered, even though my "over" event did not - specifically when I was dragging my object to another object that was close to the object being dragged. The suggestion of playing with the size of the helper did not work for me, but got me experimenting with the other attributes. I was surprised to find that when I increased my scrollSensibility, my problem went away. That is, because my draggable area was very large (horizontally), I had set scroll:true and scrollSensitivity:160. When I increased my scrollSensitivity to 400, my problem went away.