HTML5拖放问题

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

我似乎无法做任何事情，但（（href）类型的链接拖放。如果我尝试在div上设置draggable = true选项，它将保持不可裁剪（在Firefox中）。在我的搜索中，我还没有真正看到任何Firefox的修复（然而，我已经为webkit添加了css规则）。

为了解决这个问题，我试图拖拽一个（a href） - 用于括号的数据，我可以使用的链接标记的数量是有限制的 - 从一个表格的单元格到另一个表格的文本输入字段表格的单元格及其默认操作是仅拖动链接。我想要拖动的是标签的内容（例如对于某些文本，我希望它返回“某些文本”或“可拖动”或任何其他可定制的文本）。我已经尝试通过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>

来源

2011-05-16 user756467

您可以发布你的示例代码？无论是在简短的问题中，还是尝试[jsfiddle]（http://jsfiddle.net/）。 – robertc 2011-05-16 23:13:54

下面是一个完整的代码示例我做这样的作品，根据您的骨架上面：

<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的”而不是“文本”（参见：http://dev.w3.org/html5/spec/dnd.html#dom-datatransfer-getdata）
您需要实际调用OnDragOver和OnDragStart
（也许这只是从你的内存加到样品丢失），这将是很好给你的输入元素的ID，像我一样，这样你就可以将值改为拖曳的项目
想了解更多关于这个话题，我写了一篇博客对您有帮助：A Drag and Drop Planning Board with HTML5

来源

2011-05-18 23:36:00 alexisgo

如果你使用'Text'而不是'text/plain'，那么可以使它在IE中工作。 – robertc 2011-05-20 08:09:59

HTML5拖放问题

回答

相关问题