How to check for IE Drag & Drop support of any ele

问题:

Is there a way to check if a user agent supports drag & drop of a particular element (div, tr,...)?

I've got a table with draggable table rows, which works fine in Chrome. But since Internet Explorer (up to version 9) only supports dragging of images and links (and a few others), I wanted to give it a little anchor drag handle inside the table row instead. My code looks something like this:

<table>
    <tr draggable="true">
        <td><a class="drag-handle"></a> Hello World</td>
    </tr>
</table>

JS/jQuery:

$('tr[draggable]').each(function() {
    // Remove draggable="true" from <tr>
    $(this).attr('draggable', '');
    // Add draggable="true" to <a class="drag-handle">
    $(this).find('.drag-handle').attr('draggable', 'true');
});

Obviously, there is a lot more to do to actually make this work, but you get the gist: giving the user a drag thingy if their client doesn't support dragging of a (IE<10).

Now i want to do the replacement only if the user's client doesn't support dragging of table rows. Is there any known feature detection for that?

回答1:

From Detecting HTML5 Drag And Drop support in javascript:

if('draggable' in document.createElement('span')) {
    alert("Drag support detected");
}

Thanks to Mark Rhodes for the tip! Also thanks to micha for pointing out my jQuery error (removeAttr('draggable') instead of attr('draggable')).