JSFiddle - React, Tailwind, and code Playground

by sandro_paganotti

HTML

<table style="cursor: default;" id=""><tbody>
  <tr><td>
    <div id=“1” class="sequence_div selectable"> 1 </div>
  </td><td>
    <div id=“2” class="sequence_div selectable"> 2 </div>
  </td><td>
    <div id=“3” class="sequence_div selectable"> 3 </div>
  </td><td>
    <div id=“4” class="sequence_div selectable"> 4 </div>
  </td><td>
    <div id=“5” class="sequence_div selectable"> 5 </div>
  </td></tr>
</tbody></table>
<div>Sum: <span id="sum">0</span></div>
<div id="area"></div>

CSS

body{
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
#area{
    display: none;
    position: absolute;
    background: rgba(0,0,0,0.3);
}

JavaScript

var box = {};
var area = document.getElementById('area');
var sum = document.getElementById('sum');
var vals = [].slice
    .call(document.querySelectorAll('.sequence_div'))
    .map(function(node){ return {
        val: parseInt(node.textContent,10),
        box: node.getBoundingClientRect()
    }});

window.addEventListener('mousedown', function(evt){
    box.x = evt.clientX;
    box.y = evt.clientY;
});
window.addEventListener('mousemove', function(evt){
    if(Object.keys(box).indexOf('x') !== -1){
        var rect = {
            t: Math.min(evt.clientY,box.y), 
            l: Math.min(evt.clientX,box.x),
            w: Math.abs(evt.clientX - box.x),
            h: Math.abs(evt.clientY - box.y)
        };
        area.setAttribute('style', 'display:block;' +
            'top:' + rect.t + 'px;left:'+ rect.l + 'px;' +
            'width:' + rect.w + 'px;height:' + rect.h + 'px;'              
        );
        sum.textContent = vals.filter(function(val){
            return val.box.top >= rect.t &&
               val.box.top + val.box.height <= rect.t + rect.h &&
               val.box.left >= rect.l &&
               val.box.left + val.box.width <= rect.l + rect.w;
        }).reduce(function(memo, val){
            return memo + val.val;
        },0);
    }
});
window.addEventListener('mouseup', function(evt){
    area.removeAttribute('style');
    sum.textContent = 0;
    box = {};
});