javascript - Issue with HTML5 Drag and Drop - Stack Overflow

admin管理员组

文章数量:1313748

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

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

• javascript
• html
• drag-and-drop

Share Improve this question Follow edited Jul 23, 2011 at 0:48 Denilson Sá Maia 49.5k3535 gold badges114114 silver badges113113 bronze badges asked May 16, 2011 at 23:05 user756467user756467 1111 silver badge33 bronze badges 1

• Can you post your example code? Either in the question if it's short, or try jsfiddle. – robertc Commented May 16, 2011 at 23:13

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

Here's a plete 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/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

本文标签： javascriptIssue with HTML5 Drag and DropStack Overflow