Question

我对javascript / web编程有点新意，我一直有一些问题可能应该有简单的解决方案但是我遇到了极大的麻烦。我基本上只想将文本从一个表中的单元格拖到另一个表中的单元格。我的问题如下：

除了（a href）类型链接拖放之外我似乎无法做任何事情。如果我尝试在div上设置draggable = true选项，它仍然是不可分割的（在Firefox中）。在我的搜索中，我还没有看到任何针对firefox的修复（但是我已经为webkit添加了css规则）。

为了解决这个问题，我试图拖动一个（a href） - 用于括号的空间，我可以使用的链接标签数量有限制 - 从一个表格的单元格到另一个表格中的文本输入字段的项目单元格及其默认操作是只拖动链接。我想要拖动的是标签的内容（例如，对于某些文本我希望它返回“Some Text”或“draggable”或任何其他可自定义的文本）。我已尝试通过e.datatransfer.setData（“Text”，“My Custom Text”）和e.datatransfer.getData（“Text”）在ondragstart / ondrop事件中处理此问题但是我仍然收到相同的结果。有人对此有任何建议吗？我一直在看这个问题，根本无法解决这个问题。非常感谢您的帮助。

编辑：我无法访问我正在使用atm的计算机，但我会尝试了解我正在做的事情的基本要点..

onDrop(e){ //onDrop is assigned to the drophandler of a text input field
    var text = e.dataTransfer.getData('Text');
    this.Text = text;
    e.preventDefault();
} 
onDragOver(e){
    e.preventDefault();
}
onDragStart(e){
    e.dataTransfer.setData('Text', 'My String');
}
....
<table>
  <tr>
    <td><a id="ident" href="#" draggable="true">Text Content</a></td>
  </tr>
<table>

<table>
  <tr>
    <td><input ondrop="onDrop(e)" type="text" /></td>
  </tr>
<table>

Answer 1

这是我完成的完整代码示例，基于上面的骨架：

<html>
    <head>
        <title>drag and drop example</title>
        <script type="text/javascript">
            function onDrop(e){ 
                e.preventDefault();
                var text = e.dataTransfer.getData("text/plain");
                var input = document.getElementById("destination");
                input.value = text;
            }

            function onDragOver(e){
                e.preventDefault();
            }

            function onDragStart(e){
                e.dataTransfer.setData("text/plain", event.target.textContent);

            }

        </script>
    </head>
    <body>
        <table>
            <tr>
                <td>
                    <span id="ident" draggable="true" ondragstart="onDragStart(event)">Text Content</span>
                </td>
            </tr>
            <table>
                <table>
                    <tr>
                        <td>
                            <input id="destination" ondragover="onDragOver(event)" ondrop="onDrop(event)" type="text" />
                        </td>
                    </tr>
                    <table>
                    </body>
                </html>

有几点需要注意：

传递给setData和getData的格式必须是“text / plain”而不是“Text”（参见：http://dev.w3.org/html5/spec/dnd.html#dom-datatransfer-getdata）
你需要实际调用OnDragOver和OnDragStart（也许这只是你从内存中添加的样本中遗漏的）
像我一样给你的输入元素一个ID是好的，所以你可以将值更改为拖动的项目
要了解有关此主题的更多信息，我撰写了一篇您可能会感兴趣的博客：A Drag and Drop Planning Board with HTML5

HTML5拖放问题

1 个答案: