DataTransfer test

datatransfer-test.markdown

DataTransfer test

A Pen by TechQuery on CodePen.

License.

index.html

<title>DataTransfer test</title>
<script src="https://cdn.bootcss.com/bowser/1.9.3/bowser.min.js"></script>

<h1>DataTransfer test</h1>
<main>
    <form>
        <fieldset>
            <legend>&lt;input /></legend>

            <input type="text">
            
            <table class="center">
                <tr>
                    <th scope="row">Operation type</th>
                    <td></td>
                </tr>
                <tr>
                    <th scope="row">Content type</th>
                    <td><ol></ol></td>
                </tr>
            </table>
        </fieldset>
        <fieldset>
            <legend>&lt;textarea /></legend>

            <textarea></textarea>
            
            <table class="center">
                <tr>
                    <th scope="row">Operation type</th>
                    <td></td>
                </tr>
                <tr>
                    <th scope="row">Content type</th>
                    <td><ol></ol></td>
                </tr>
            </table>
        </fieldset>
        <fieldset>
            <legend>&lt;div contenteditable /></legend>

            <div contenteditable></div>
            
            <table class="center">
                <tr>
                    <th scope="row">Operation type</th>
                    <td></td>
                </tr>
                <tr>
                    <th scope="row">Content type</th>
                    <td><ol></ol></td>
                </tr>
            </table>
        </fieldset>
        <p class="center">
            <input type="reset">
        </p>
    </form>

    <aside>
        <table class="center">
            <tr>
                <th scope="row">Source code</th>
                <td>
                    Written by
                    <a target="_blank" href="https://gist.github.com/TechQuery/0e6e2c9dbc156c5fbedd137eb2223057">
                        @TechQuery
                    </a>
                </td>
            </tr>
            <tr>
                <th scope="row">Operating system</th>
                <td></td>
            </tr>
            <tr>
                <th scope="row">Web browser</th>
                <td></td>
            </tr>
        </table>
    </aside>
</main>

script.js

const cell = document.querySelectorAll('aside > table td');

cell[1].textContent = `${bowser.osname} ${bowser.osversion}`;
cell[2].textContent = `${bowser.name} ${bowser.version}`;


const form = document.querySelector('form');

form.onpaste = form.ondrop = event => {

    const target = event.target;
    
    const cell = target.nextElementSibling.querySelectorAll('td');
    
    cell[0].textContent = event.type;

    const transfer = event.clipboardData || event.dataTransfer;
    
    cell[1].firstChild.innerHTML = Array.from(
        transfer.items,  item => `<li>${item.kind} ${item.type}</li>`
    ).join('\n');
    
    if (event.type === 'drop')  event.preventDefault();
};


form.onreset = () => {

    for (let cell of form.querySelectorAll('[contenteditable], td'))
        cell.textContent = '';
};


window.onbeforeunload = () => 
    'This kind of operation on current platform can\'t prevent redirecting by event.preventDefault()';

style.css

body > main, aside > table {
    display:  table;
    width:    100%;
}
body > main > * {
    display:  table-cell;
    width:    50%;
}
.center {
    text-align:  center;
}

form > fieldset > * {
    vertical-align:  top;
}
form input, form textarea, form [contenteditable] {
    min-width:  15rem;
    padding:    0.25rem;
}
[contenteditable] {
    appearance:  textfield;
    display:     inline-block;
    min-height:  1rem;
    border:      1px solid;
}

form table {
    display:  inline-table;
}
table ol {
    text-align:  left;
}