test-drag

HTML

<script src="http://www.redips.net/my/redips-drag-min.js"></script>
    <div id="redips-drag">
        <div id="g123">
            <table id="view">
                 <colgroup>
    <col width="50"/><col width="50"/><col width="50"/><col width="50"/><col width="50"/><col width="50"/><col width="50"/><col width="50"/><col width="50"/><col width="50"/>
                 </colgroup>
    
                 <tr><td class="initcell" id="A1">A1</td><td class="initcell" id="A2">A2</td><td class="initcell" id="A3">A3</td><td class="initcell" id="A4">A4</td><td class="initcell" id="A5">A5</td><td class="initcell" id="A6">A6</td><td class="initcell" id="A7">A7</td><td class="initcell" id="A8">A8</td><td class="initcell" id="A9">A9</td><td class="initcell" id="A10">A10</td></tr>
    
                 <tr><td class="initcell" id="B1">B1</td><td class="initcell" id="B2">B2</td><td class="initcell" id="B3">B3</td><td class="initcell" id="B4">B4</td><td class="initcell" id="B5">B5</td><td class="initcell" id="B6">B6</td><td class="initcell" id="B7">B7</td><td class="initcell" id="B8">B8</td><td class="initcell" id="B9">B9</td><td class="initcell" id="B10">B10</td></tr>
    
                 <tr><td class="initcell" id="C1">C1</td><td class="initcell" id="C2">C2</td><td class="initcell" id="C3">C3</td><td class="initcell" id="C4">C4</td><td class="initcell" id="C5">C5</td><td class="initcell" id="C6">C6</td><td class="initcell" id="C7">C7</td><td class="initcell" id="C8">C8</td><td class="initcell" id="C9">C9</td><td class="initcell" id="C10">C10</td></tr>
    
                 <tr><td class="initcell" id="D1">D1</td><td class="initcell" id="D2">D2</td><td class="initcell" id="D3">D3</td><td class="initcell" id="D4">D4</td><td class="initcell" id="D5">D5</td><td class="initcell" id="D6">D6</td><td class="initcell" id="D7">D7</td><td class="initcell" id="D8">D8</td><td class="initcell" id="D9">D9</td><td class="initcell" id="D10">D10</td></tr>
    
                 <tr><td...

CSS

.cell{
      text-align:center;
      font-size:20px;
    }
    .initcell{
        color:#D6D6D6;
        font-size:30px;
        text-align: center;
        border: 0;
        padding: 5px;
    }
    .redips-drag {
        cursor: move;
        margin: auto;
        border: 0;
    }
    div#redips-drag td {
        border: 0 white solid;
        text-align: center;
    }
    .datacell{
        color: #000;
    }
    table {
      border: 1px solid black;
    }
    td{
        border: 0;
    }
    .green{
        background-color: green;
    }
    .red{
        background-color: red;
    }

JavaScript

/**
 * Created by stephanep on 20.08.15.
 */
"use strict";
var test_data = {"item1": {"locator": ["A1","A2", "B1", "B2"], "type": "type1"},
                 "item2": {"locator": ["C5", "C6", "C7", "D5", "D6", "D7"], "type":"type2"}};

var color_map = {"type1": "green", "type2": "red"};
var current_data = {};  // this will hold the current view of the data

function render_data(data){ // called only once, during init
    for(var obj in data){
        color_cells(data, obj);
    }
}


// The following 2 functions are only here to help compute 
// the coordinates for the new positions
function ord(string) {
  //  discuss at: http://phpjs.org/functions/ord/
  // original by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
  // bugfixed by: Onno Marsman
  // improved by: Brett Zamir (http://brett-zamir.me)
  //    input by: incidence
  //   example 1: ord('K');
  //   returns 1: 75
  //   example 2: ord('\uD800\uDC00'); // surrogate pair to create a single Unicode character
  //   returns 2: 65536

  var str = string + '',
    code = str.charCodeAt(0);
  if (0xD800 <= code && code <= 0xDBFF) { // High surrogate (could change last hex to 0xDB7F to treat high private surrogates as single characters)
    var hi = code;
    if (str.length === 1) {
      return code; // This is just a high surrogate with no following low surrogate, so we return its value;
      // we could also throw an error as it is not a complete character, but someone may want to know
    }
    var low = str.charCodeAt(1);
    return ((hi - 0xD800) * 0x400) + (low - 0xDC00) + 0x10000;
  }
  if (0xDC00 <= code && code <= 0xDFFF) { // Low surrogate
    return code; // This is just a low surrogate with no preceding high surrogate, so we return its value;
    // we could also throw an error as it is not a complete character, but someone may want to know
  }
  return code;
}

function chr(codePt) {
  //  discuss at: http://phpjs.org/functions/chr/
  // original by: Kevin van Zonneveld...