event.DataTransfer在Jetty中运行时不会传输拖动对象的ID

时间:2012-05-18 07:37:51

标签: html5 jsp maven drag-and-drop jetty

我有一个使用JavaScript的JSP的Maven Jetty项目。我希望能够突出显示与拖动图像大小相对应的画布部分。

当我通过在浏览器中打开它来查看我的JSP时,一切都按预期工作,但是当我使用目标jetty启动Jetty服务器时:运行拖动对象的ID未设置或无法从transferData检索事件。

相关代码:所有可拖动图像都有唯一的ID。在拖动开始时,我在事件的transferData上设置拖动图像的ID,如下所示:

function dragShipFromTable(event) {
    event.dataTransfer.setData("id",event.target.id);
}

当图像在画布上拖动时,我调用以下函数

function allowDrop(event) {
    event.preventDefault();
    var id = event.dataTransfer.getData("id");
    var img = document.getElementById(id);
    // Do the highlighting stuff
    ....
}

问题在于,当服务器启动并执行上述操作时,在allowDrop(event)中,未从transferData检索拖动图像的ID。它未定义,因此突出显示失败。简单地将JSP作为文件打开就不是这种情况。

1 个答案:

答案 0 :(得分:2)

我有点找到自己问题的答案。首先,dataTransfer对象上的setData方法仅允许某些格式作为第一个参数。我把它解释为一个关联数组,但事实并非如此。所以它应该是

event.dataTransfer.setData("text/plain", id);
event.dataTransfer.getData("text/plain");

正确设置和检索ID。

但最终由于Chrome导致一切都失败,因为Chrome中存在一个错误,导致我无法按预期使用dataTransfer(请参阅How do you get the selected items from a dragstart event in Chrome? Is dataTransfer.getData broken?)。

我现在使用全局变量来存储我需要的信息。而且我仍然想知道为什么当页面显示为文件而不是来自网络服务器的响应时,一切正常。