DND DropEffect Test

Testcase for drop effect feedback.

HTML

<div class="dndTest">
    <div>List of drag source. Drag any of these sources over the drop targets. The cursor is supposed to show the allowed drop effect, which should be the result of a combination between the allowed effects by the source and the drop effect on the target. This only seems to work on Chrome in this example.</div>
    <div id="bla">Bla bla bla</div>
    <div> <a class="dragSource" draggable="true" href="#" ondragstart="onDragStart(this, event)">none</a>
 <a class="dragSource" draggable="true" href="#" ondragstart="onDragStart(this, event)">copy</a>
 <a class="dragSource" draggable="true" href="#" ondragstart="onDragStart(this, event)">move</a>
 <a class="dragSource" draggable="true" href="#" ondragstart="onDragStart(this, event)">link</a>
 <a class="dragSource" draggable="true" href="#" ondragstart="onDragStart(this, event)">copyMove</a>
 <a class="dragSource" draggable="true" href="#" ondragstart="onDragStart(this, event)">copyLink</a>
 <a class="dragSource" draggable="true" href="#" ondragstart="onDragStart(this, event)">linkMove</a>
 <a class="dragSource" draggable="true" href="#" ondragstart="onDragStart(this, event)">all</a>

    </div>
    <div>List of drop targets.</div>
    <div>
        <div class="dropTarget" ondragenter="onDragEnter(this, event)" ondragover="onDragEnter(this, event)">copy</div>
        <div class="dropTarget" ondragenter="onDragEnter(this, event)" ondragover="onDragEnter(this, event)">move</div>
        <div class="dropTarget" ondragenter="onDragEnter(this, event)" ondragover="onDragEnter(this, event)">link</div>
        <div class="dropTarget" ondragenter="onDragEnter(this, event)" ondragover="onDragEnter(this, event)">none</div>
    </div>
    
    <div>
        Test results so far:
        <dl>
            <dt>
                Chrome
            </dt>
            <dd>
                Works as expected
            </dd>
            <dt>
                Internet Explorer
            </dt>
            <dd>
          ...

CSS

.dndTest .dragSource {
    margin: 1em;
    padding: 1em;
    border: 1px solid black;
    display: inline-block;
    background-color: #fff0ff;
}
.dndTest .dropTarget {
    margin: 1em;
    padding: 1em;
    border: 1px solid black;
    display: inline-block;
    background-color: #f0f0ff;
}

JavaScript

function onDragStart(element, event) {
    var dataTransfer = event.dataTransfer,
        effect = element.innerText || element.textContent;
  	const dragImage = document.getElementById('bla').cloneNode(true);
    document.body.appendChild(dragImage);
    dragImage.style.position = 'absolute';
    dragImage.style.top = '100px';
    dragImage.style.left = '100px';
    dragImage.style.color = 'red';
    dragImage.style.visibility = 'hidden';
    dataTransfer.effectAllowed = effect;
    dataTransfer.setData("Text", effect);
    dataTransfer.setDragImage(dragImage, -100, -100);
}

function onDragEnter(element, event) {
    var dataTransfer = event.dataTransfer,
        effect = element.innerText || element.textContent;
    dataTransfer.dropEffect = effect;
    event.preventDefault();
}

function onDragOver(element, event) {
    var dataTransfer = event.dataTransfer,
        effect = element.innerText || element.textContent;
    dataTransfer.dropEffect = effect;
    event.preventDefault();
}