Issue with HTML5 Drag and Drop_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-03-06 20:22 出处：网络

I am a bit new to javascript/web programmingand 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 t

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 ta开发者_StackOverflowble. 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>

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