考虑一下这个JSFiddle.它在Firefox(14.0.1)中工作正常,但在Windows(7)和OS X(10.8)上的Chrome(21.0.1180.75),Safari(？)和Opera(12.01？)都失败了.据我所知,问题在于对象上的setData()或者getData()方法dataTransfer.这是JSFiddle的相关代码.
var dragStartHandler = function (e) {
e.originalEvent.dataTransfer.effectAllowed = "move";
e.originalEvent.dataTransfer.setData("text/plain", this.id);
};
var dragEnterHandler = function (e) {
// dataTransferValue is a global variable declared higher up.
// No, I don't want to hear about why global variables are evil,
// that's not my issue.
dataTransferValue = e.originalEvent.dataTransfer.getData("text/plain");
console.log(dataTransferValue);
};
据我所知,这应该可以正常工作,如果你在拖动项目的同时查看控制台,你会看到写出的id,这意味着它正好找到了元素并抓住了它的id属性.问题是,它是不是设置数据还是没有获取数据？
我很欣赏这些建议,因为经过一周的努力,经过三次尝试和200多个版本,我开始放松心情.我所知道的是它曾经在60左右的版本中工作,而且具体的代码根本没有改变......
实际上,6X和124之间的主要区别之一是我将事件绑定从更改这已经被揭穿了.事件绑定方法对此问题没有影响.live()为on().我不认为这是问题所在,但是在谈到DnD时,我已经看到Chrome出现了几次失败.
UPDATE
我已经创建了一个新的JSFiddle,它完全消除了所有内容,只留下了事件绑定和处理程序.我用jQuery 1.7.2和1.8既测试了它on()和live().问题持续存在,因此我删除了一个级别并删除了所有框架并使用了纯JavaScript.这个问题仍然 …
我正在尝试从桌面浏览器窗口实现拖放文件.我使用jQuery将三个事件附加到HTML元素,如下面的代码所示:
$("html").on("dragover", function() {
$(this).addClass('dragging');
});
$("html").on("dragleave", function() {
$(this).removeClass('dragging');
});
$("html").on("drop", function(event) {
event.preventDefault();
event.stopPropagation();
alert("Dropped!");
});
'dragover'和'dragleave'事件工作得很好,当我将文件拖到删除它上时,如果我再次拖出文件,则会在整个页面周围显示插入边框.
但是,'drop'事件似乎根本没有触发,删除的文件只是在浏览器窗口中打开.
有谁知道为什么这个事件没有解雇？
顺便说一句,我在最新版本的Chrome中使用jQuery 1.10.2进行测试.
我正在听这个drop事件并且正在e.preventDefault()尝试打开已删除的文件.它一直工作到昨天.但就在今天它因某些未知原因而破产.我做了一个JsFiddle#bwquR/10反映相同的.
看起来如果你不采取dragover事件drop无法处理.即使在小提琴中如果你评论dragover它也行不通.
在实际工作中我错过了拼写dragover但是它仍然是一个问题,drop如果没有dragover
小提琴实际上是工作但是身体很小(只有DROP那里的文字).它drop只是在DROP文字不在整个身体上的那个小区域上进行.所以我觉得它不起作用.对困惑感到抱歉.
我们正在使用Angular 2实现拖放功能.
我正在使用该dragover事件来运行该preventDefault()功能.这样的drop事件就像这个问题中解释的那样.
该dragover方法由onDragOver组件中的函数处理.
<div draggable="true"
(dragover)="onDragOver($event)">
...
在组件中,此功能可防止默认行为,允许将拖动的项目放在此目标上.
onDragOver(event) {
event.preventDefault();
}
这按预期工作.每隔几百毫秒就会触发一次dragover事件.
但是,每次onDragOver调用该函数时,Angular 2都会运行其摘要周期.这会降低应用程序的速度.我想在不触发摘要周期的情况下运行此功能.
我们使用的解决方法是订阅元素事件并在Angular 2的上下文之外运行它,如下所示:
constructor( ele: ElementRef, private ngZone: NgZone ) {
this.ngZone.runOutsideAngular( () => {
Observable.fromEvent(ele.nativeElement, "dragover")
.subscribe( (event: Event) => {
event.preventDefault();
}
);
});
}
这很好用.但有没有办法实现这一点,而无需直接访问nativeElement？
我正在学习 html 中的拖放程序，我尝试了下面的代码。
<html>
<head>
My head
<script>
function dragme(event)
{
event.dataTransfer.setData("sourceID", event.target.id);
}
function dropHere(event)
{
event.preventDefault();
alert ("inside drop Here..");
}
function dropOver(event)
{
console.log ("inside drop Over..");
}
</script>
<style>
div {width:500px;height:400px;border-color:red;border-style:solid;}
</style>
</head>
<body>
<div id="sourcedrag" ondrop="dropHere(event)" ondragover="dropOver(event)">
inside div
</div>
<button draggable=true id="button" ondragstart="dragme(event)" >Press me </button>
<button draggable=true id="button1"> Second Press me </button>
<button draggable=true id="button2"> Second Press me </button>
<button draggable=true id="button3"> Second Press me </button>
<button draggable=true id="button4"> Second Press me </button> …