HTML5 拖放问题

发布于 2024-11-08 08:44:27 字数 1232 浏览 0 评论 0原文

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

除了（a href）类型的链接拖放之外，我似乎无法进行任何操作。如果我尝试在 div 上设置 Draggable=true 选项，它仍然不可拖动（在 Firefox 中）。在我的搜索中，我还没有真正看到任何针对 Firefox 的修复（不过，我已经为 webkit 添加了 css 规则）。

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

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

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>

原文

I am a bit new to javascript/web programming and I've been having some issues that should probably have simple solutions but that I am having an extreme amount of trouble with. I basically just want to drag text from a cell in one table to a cell in another table. My questions are as follows:

I cannot seem to make anything but an (a href) type link drag and drop. If I try to set the draggable=true option on a div it remains undraggable (in firefox). In my searches, I haven't really seen any fixes for firefox ( i have added css rules for webkit, however).

To work around this, I was trying to drag an (a href) -apologies for parentheses, there is a limit on the amount of link tags i can use - item from one table's cell to a text input field in another table's cell and its default action is to just drag the link. What I'd like it to drag would be the contents of the tag (e.g. for Some Text I'd like it to return "Some Text" or "draggable" or any other customizable text). I have tried handling this in the ondragstart/ondrop events through e.datatransfer.setData("Text", "My Custom Text") and e.datatransfer.getData("Text") however I still receive the same results. Would anybody have any suggestions for this? I have been looking at this for a while and cannot figure it out at all.
Thank you very much in advance for your help.

EDIT: I do not have access to the computer I was using atm but I'll try to get the basic gist of what I was doing across..

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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

梦回梦里 2024-11-15 08:47:38

这是我根据上面的框架所做的完整代码示例：

<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，就像我所做的那样，这样您就可以将值更改为拖动的项目
要阅读有关此主题的更多信息，我写了一篇博客，您可能会觉得有帮助：使用 HTML5 的拖放规划板

Here's a complete code sample I did that works, based on your skeleton above:

<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>

Several things to note:

The format you pass to setData and getData needs to be "text/plain" not "Text" (see: http://dev.w3.org/html5/spec/dnd.html#dom-datatransfer-getdata)
You needed to actually call OnDragOver and OnDragStart (perhaps this was just missing from the sample you added from memory)
It would be good to give your input element an ID, as I did, so you can change the value to the dragged item
To read more about this topic, I wrote a blog you may find helpful: A Drag and Drop Planning Board with HTML5

回复收藏 0 原文

~没有更多了~