Javascript – Issue with HTML5 Drag and Drop

drag and drophtmljavascript

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>

Best Answer

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

Modern HTML5 Techniques for changing classes

Modern browsers have added classList which provides methods to make it easier to manipulate classes without needing a library:

document.getElementById("MyElement").classList.add('MyClass');

document.getElementById("MyElement").classList.remove('MyClass');

if ( document.getElementById("MyElement").classList.contains('MyClass') )

document.getElementById("MyElement").classList.toggle('MyClass');

Unfortunately, these do not work in Internet Explorer prior to v10, though there is a shim to add support for it to IE8 and IE9, available from this page. It is, though, getting more and more supported.

Simple cross-browser solution

The standard JavaScript way to select an element is using document.getElementById("Id"), which is what the following examples use - you can of course obtain elements in other ways, and in the right situation may simply use this instead - however, going into detail on this is beyond the scope of the answer.

To change all classes for an element:

To replace all existing classes with one or more new classes, set the className attribute:

document.getElementById("MyElement").className = "MyClass";

(You can use a space-delimited list to apply multiple classes.)

To add an additional class to an element:

To add a class to an element, without removing/affecting existing values, append a space and the new classname, like so:

document.getElementById("MyElement").className += " MyClass";

To remove a class from an element:

To remove a single class to an element, without affecting other potential classes, a simple regex replace is required:

document.getElementById("MyElement").className =
   document.getElementById("MyElement").className.replace
      ( /(?:^|\s)MyClass(?!\S)/g , '' )
/* Code wrapped for readability - above is all one statement */

An explanation of this regex is as follows:

(?:^|\s) # Match the start of the string or any single whitespace character

MyClass  # The literal text for the classname to remove

(?!\S)   # Negative lookahead to verify the above is the whole classname
         # Ensures there is no non-space character following
         # (i.e. must be the end of the string or space)

The g flag tells the replace to repeat as required, in case the class name has been added multiple times.

To check if a class is already applied to an element:

The same regex used above for removing a class can also be used as a check as to whether a particular class exists:

if ( document.getElementById("MyElement").className.match(/(?:^|\s)MyClass(?!\S)/) )

### Assigning these actions to onclick events:

Whilst it is possible to write JavaScript directly inside the HTML event attributes (such as onclick="this.className+=' MyClass'") this is not recommended behaviour. Especially on larger applications, more maintainable code is achieved by separating HTML markup from JavaScript interaction logic.

The first step to achieving this is by creating a function, and calling the function in the onclick attribute, for example:

<script type="text/javascript">
    function changeClass(){
        // Code examples from above
    }
</script>
...
<button onclick="changeClass()">My Button</button>

_{(It is not required to have this code in script tags, this is simply for the brevity of example, and including the JavaScript in a distinct file may be more appropriate.)}

The second step is to move the onclick event out of the HTML and into JavaScript, for example using addEventListener

<script type="text/javascript">
    function changeClass(){
        // Code examples from above
    }

    window.onload = function(){
        document.getElementById("MyElement").addEventListener( 'click', changeClass);
    }
</script>
...
<button id="MyElement">My Button</button>

(Note that the window.onload part is required so that the contents of that function are executed after the HTML has finished loading - without this, the MyElement might not exist when the JavaScript code is called, so that line would fail.)

JavaScript Frameworks and Libraries

The above code is all in standard JavaScript, however, it is common practice to use either a framework or a library to simplify common tasks, as well as benefit from fixed bugs and edge cases that you might not think of when writing your code.

Whilst some people consider it overkill to add a ~50 KB framework for simply changing a class, if you are doing any substantial amount of JavaScript work or anything that might have unusual cross-browser behavior, it is well worth considering.

(Very roughly, a library is a set of tools designed for a specific task, whilst a framework generally contains multiple libraries and performs a complete set of duties.)

The examples above have been reproduced below using jQuery, probably the most commonly used JavaScript library (though there are others worth investigating too).

(Note that $ here is the jQuery object.)

Changing Classes with jQuery:

$('#MyElement').addClass('MyClass');

$('#MyElement').removeClass('MyClass');

if ( $('#MyElement').hasClass('MyClass') )

In addition, jQuery provides a shortcut for adding a class if it doesn't apply, or removing a class that does:

$('#MyElement').toggleClass('MyClass');

### Assigning a function to a click event with jQuery:

$('#MyElement').click(changeClass);

or, without needing an id:

$(':button:contains(My Button)').click(changeClass);

Html – Set cellpadding and cellspacing in CSS

Basics

For controlling "cellpadding" in CSS, you can simply use padding on table cells. E.g. for 10px of "cellpadding":

td { 
    padding: 10px;
}

For "cellspacing", you can apply the border-spacing CSS property to your table. E.g. for 10px of "cellspacing":

table { 
    border-spacing: 10px;
    border-collapse: separate;
}

This property will even allow separate horizontal and vertical spacing, something you couldn't do with old-school "cellspacing".

Issues in IE ≤ 7

This will work in almost all popular browsers except for Internet Explorer up through Internet Explorer 7, where you're almost out of luck. I say "almost" because these browsers still support the border-collapse property, which merges the borders of adjoining table cells. If you're trying to eliminate cellspacing (that is, cellspacing="0") then border-collapse:collapse should have the same effect: no space between table cells. This support is buggy, though, as it does not override an existing cellspacing HTML attribute on the table element.

In short: for non-Internet Explorer 5-7 browsers, border-spacing handles you. For Internet Explorer, if your situation is just right (you want 0 cellspacing and your table doesn't have it defined already), you can use border-collapse:collapse.

table { 
    border-spacing: 0;
    border-collapse: collapse;
}

Note: For a great overview of CSS properties that one can apply to tables and for which browsers, see this fantastic Quirksmode page.