Drag-and-Drop, Copy-Paste

by TigerAsks

HTML

<textarea id="source" rows="4" cols="50">
Copy Me
</textarea>

<div id="drop-area" class="drag-and-drop-area" tabindex="0" contenteditable="true">
    <div class="drop-mask" ></div>
    <div class="drop-label">
        <span>Copy-paste or Drag-and-Drop here</span>
    </div>
    <textarea class="drop-hook"><!-- only serves as a hook into java--></textarea> 
</div>

<textarea readonly id="vaadin" rows="4" cols="50"></textarea>

CSS

:root {
    --drop-area-background: grey;
    --drop-area-border-color: black;
    --drop-area-border-style: dashed;
    --drop-area-border-width: 3px;
    --drop-area-border-radius: 25px;
    --drop-area-focus-color: blue;
}

.drag-and-drop-area {
    display: table;
    overflow: hidden;
    text-align: center;
    height: 100px;
    width: 300px;
    background: var(--drop-area-background);
    border-style: var(--drop-area-border-style);
    border-color: var(--drop-area-border-color);
    border-width: var(--drop-area-border-width);
    border-radius: var(--drop-area-border-radius);
    color: transparent;
    text-shadow: 0 0 0 var(--drop-area-border-color);
}

.drag-and-drop-area .drop-mask {
    position: absolute;
    z-index: 99;
    width: inherit;
    height: inherit;
    margin: -2px;
    background: transparent;
    border-color: transparent;
}

.drag-and-drop-area .drop-hook {
    display: none;
}

.drag-and-drop-area .drop-label {
    display: table-cell;
    vertical-align: middle;
    color: transparent;
    text-shadow: 0 0 0 var(--drop-area-border-color);
}

.drag-and-drop-area:hover,
.drag-and-drop-area.drag-over,
.drag-and-drop-area:focus {
    border-color: var(--drop-area-focus-color);
    outline: 0px solid transparent;
}

.drag-and-drop-area:hover .drop-label,
.drag-and-drop-area.drag-over .drop-label,
.drag-and-drop-area:focus .drop-label{
    text-shadow: 0 0 0 var(--drop-area-focus-color);
}

JavaScript

var dropArea = document.getElementById('drop-area');
var dropMask = dropArea.firstElementChild;
var dropHook = dropArea.lastElementChild;

dropArea.addEventListener('beforeinput', function(e){
	e.preventDefault();
    e.stopPropagation();
}, true);

dropArea.addEventListener('paste', function(e){
	e.preventDefault();
    let value = (event.clipboardData || window.clipboardData).getData('text');
    dropHook.value = value; //triggers vaadin change event
    document.getElementById('vaadin').value = value;//dummy change listener
}, false);

dropMask.addEventListener('dragenter', function(e) {
    e.preventDefault();
    dropArea.classList.add('drag-over');
}, false);

dropMask.addEventListener('dragover', function(e) {
    e.preventDefault();
    e.dataTransfer.dropEffect = 'copy';
}, false);

dropMask.addEventListener('dragleave', function(e) {
    e.preventDefault();
    dropArea.classList.remove('drag-over');
}, false);

dropMask.addEventListener('drop', function(e) {
    e.preventDefault();
    dropArea.classList.remove('drag-over');
    
    let value = e.dataTransfer.getData('Text');
    dropHook.value = value; //triggers vaadin value change listener
    document.getElementById('vaadin').value = value;//dummy change listener
}, false);