h1 You can drag the blue circle from left to right
#drag-drop-basic
  #source-container
    #drag-source(draggable='true')
  #target-container
View Compiled 
/**
 * Drag and Drop Basic
 **/

[draggable="true"] {
    /*
   To prevent user selecting inside the drag source
  */
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

#drag-drop-basic {
    display: flex;

    #source-container {
        height: 400px;
        border: 2px solid #CCC;
        flex: 1;
        margin: 1rem;
    }

    #target-container {
        height: 400px;
        border: 2px solid #CCC;
        flex: 1;
        margin: 1rem;
    }

    #drag-source {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background-color: steelblue;
    }
}

// End of Drag and Drop Basic
View Compiled 
/**
 * Drag and Drop Basic
 */

let dragSource = document.querySelector('#drag-source')
dragSource.addEventListener('dragstart', dragStart)

let dropTarget = document.querySelector('#target-container')
dropTarget.addEventListener('drop', dropped)
dropTarget.addEventListener('dragenter', cancelDefault)
dropTarget.addEventListener('dragover', cancelDefault)

function cancelDefault (e) {
  e.preventDefault()
  e.stopPropagation()
  return false
}

function dragStart (e) {
  console.log('dragStart')
  e.dataTransfer.setData('text/plain', e.target.id)
}

function dropped (e) {
  console.log('dropped')
  cancelDefault(e)
  let id = e.dataTransfer.getData('text/plain')
  e.target.appendChild(document.querySelector('#' + id))
}
// End of Drag and Drop Basic

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.