我遇到的问题dragleave是当悬停该元素的子元素时会触发元素事件.此外,dragenter再次悬停父元素时不会触发.
我做了一个简化的小提琴:http://jsfiddle.net/pimvdb/HU6Mk/1/.
HTML:
<div id="drag" draggable="true">drag me</div>
<hr>
<div id="drop">
drop here
<p>child</p>
parent
</div>
使用以下JavaScript:
$('#drop').bind({
dragenter: function() {
$(this).addClass('red');
},
dragleave: function() {
$(this).removeClass('red');
}
});
$('#drag').bind({
dragstart: function(e) {
e.allowedEffect = "copy";
e.setData("text/plain", "test");
}
});
它应该做的是通过在div那里拖动东西时使滴红色来通知用户.这样做有效,但是如果你拖入p孩子,那dragleave就会被激发而且div不再是红色.回到跌落div也不会再次变红.有必要完全移出掉落div并再次拖回它以使其变红.
dragleave拖入子元素时是否可以防止触发？
2017更新: TL; DR,查看CSS pointer-events: none;,如下面@ HD的答案中所述,适用于现代浏览器和IE11.
在窗口外拖动时,Firefox无法正确触发dragleave事件:
https://bugzilla.mozilla.org/show_bug.cgi?id=665704
https://bugzilla.mozilla.org/show_bug.cgi?id=656164
我正在尝试为此开发一种解决方法(我知道这可能是因为Gmail正在这样做),但我能想出的唯一的东西似乎真的很乱.
知道何时拖出窗外的一种方法是等待dragover事件停止发射(因为dragover在拖放操作期间不断发射).这就是我这样做的方式:
var timeout;
function dragleaveFunctionality() {
// do stuff
}
function firefoxTimeoutHack() {
clearTimeout(timeout);
timeout = setTimeout(dragleaveFunctionality, 200);
}
$(document).on('dragover', firefoxTimeoutHack);
此代码实际上是一次又一次地创建和清除超时.除非dragover事件停止触发,否则将无法达到200毫秒的超时.
虽然这有效,但我不喜欢为此目的使用超时的想法.感觉不对.这也意味着在"掉落区"造型消失之前会有一点滞后.
我的另一个想法是检测鼠标何时离开窗口,但在拖放操作期间,这样做的正常方法似乎不起作用.
有没有人有更好的方法这样做？
更新:
这是我正在使用的代码:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Drag and Drop Issue</title>
<script src="http://code.jquery.com/jquery.js"></script>
</head>
<body>
Open up the console and look at what number is reporting when dragging files in and out of the window. The number should always be 0 when leaving …我有一个<div>下拉目标,我附加了'drop'和'dragover'事件.该<div>包含图像的锚定标记(简单化:<div><a><img /></a></div>).目标的子元素似乎阻止触发"掉落"或"悬垂"事件.仅当拖动的元素位于目标上方但未覆盖其子元素时,才会按预期触发这两个事件.
我想要实现的行为是<div>,无论子元素是否存在,'dragover'和'drop'事件都会在目标上的任何地方触发.
情况:我正在使用HTML5拖放将瓷砖放在我正在编写的游戏中.我想添加一个效果,其中两个瓷砖,我即将放置一个新的瓷砖之间稍微移动,以表明这是你正在下降的地方(类似于Mac OS底座).
我的方法:我有一个flexbox我正在丢弃这些瓷砖的东西.我写了一个函数,基本上返回一个正弦波周期,我用它来更新丢弃的瓷砖right:和top:CSS属性(瓷砖position: relative;),基于它们相对于鼠标的原始位置drag.
// Update occupant style for desired effect
occupants.forEach(function(occupant, index) {
$(occupant).css({'right' : -10 * nudgeSine(occupantsMouseOffset[index] * 10) + 'px',
'top' : -10 * Math.abs(nudgeSine(occupantsMouseOffset[index] * 10)) + 'px',
'opacity' : 1 - Math.abs(nudgeSine(occupantsMouseOffset[index])) });
});
// Function to return 1 period of a sine wave
function nudgeSine(x) {
if (x < -3.14159 || x > 3.14159) {
return 0;
} else {
return Math.sin(x); …javascript user-interface drag-and-drop google-chrome html5-draggable
我在我的角度应用程序中使用本地HTML拖放，但发现此事件闪烁问题
这个答案不能解决我的问题，因为他们正在手动移动元素。我将其留在本机实现上。
我的简化代码：
var app = angular.module('app', []);
app.directive('amDnd', function() {
return {
scope: true,
link: function($scope, $element, $attr) {
var el = $element[0];
el.draggable = true;
el.addEventListener('dragenter', function dragEnter(e) {
console.log($scope.$id, 'dragEnter');
}, false);
el.addEventListener('dragleave', function dragEnter(e) {
console.log($scope.$id, 'dragleave');
}, false);
}
};
});div[am-dnd] {
border: 2px solid red;
}<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<div am-dnd>
<p>DRAG ME</p>
</div>
<div am-dnd>
<h3>DRAG OVER THIS AREA</h3>
<p>See the console, drag enter and leave are fired again and …这是我想要的行为:
我遇到的问题是#3.
使用dragenter开启时,掉落区域显得很好,document但我不能再让它们消失.
我已经尝试过dragend从不发射的绑定,dragleave每次拖动离开后代时都会触发,因此拖动区域会闪烁.
哪个事件是正确的听？