Drag Action

        <span coral-dragaction="">
        <p>You can drag me</p>
        <img alt="" src="http://via.placeholder.com/200x100">
      </span>
      

        <span coral-dragaction="" coral-dragaction-axis="horizontal">You can drag me on the horizontal axis only</span>
      

        <div coral-dragaction="" coral-dragaction-handle=".handle1, .handle2">
          I can be dragged only by this
          <span class="handle1"><b>handle</b></span> or this <span class="handle2"><i>handle</i></span>
        </div>
      

        <div style="height:200px;width:200px;background: #eee;overflow:scroll;">
          <div coral-dragaction="" coral-dragaction-containment="" style="width:50px;border:1px solid #999;">
            You can not drag me out
          </div>
        </div>
      

        <span coral-dragaction="" coral-dragaction-scroll="">You can drag me and window will scroll</span>
      

        <div style="overflow: auto;border: 1px solid; height:500px;width:500px;">
          <span coral-dragaction="" coral-dragaction-scroll="">You can drag me and container will scroll</span>
          <div style="background: linear-gradient(lightgoldenrodyellow, lightcoral); height:1000px;width:1000px;" tabindex="0"></div>
        </div>
      

        <span id="dragaction" coral-dragaction="" coral-dragaction-dropzone="#dropzone">You can drop me on #dropzone</span>

        <div id="dropzone" style="height:200px;width:200px;background:#eee;">I'm #dropzone</div>

        <script>
          window.addEventListener('load', function() {
            document.getElementById('dragaction').addEventListener('coral-dragaction:drop', function(event) {
              event.detail.dropElement.style.background = 'beige';
            });
          });
        </script>
      

        <span id="init-js">You can drag me vertically</span>
        <script>
          window.addEventListener('load', function() {
            var dragAction = new Coral.DragAction('#init-js');
            dragAction.axis = 'vertical';
          });
        </script>