FireNeslo/movable.css

## movable.css
ul {
    min-height: 6em;
    width: 100%;
    text-align: center;
    margin:0px;
    display:-webkit-box;
    display:-moz-box;
    display:box;
    -webkit-box-orient:horizontal;
    -moz-box-orient:horizontal;
    box-orient:horizontal;}
ul li {
  list-style-type: none;
  padding: 3em;
  -webkit-box-flex:1;
     -moz-box-flex:1;
          box-flex:1;
}
.bench {
    background-color: wheat;
}
.field {
    background-color: lightgreen;
}

## movable.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <ul class="field">
      <li>player 0</li>
  </ul>
  <ul class="field">
      <li>player 1</li>
      <li>player 2</li>
      <li>player 3</li>
  </ul>
  <ul class="field">
      <li>player 4</li>
      <li>player 5</li>
      <li>player 6</li>
      <li >player 7</li>
  </ul>
  <ul class="field">
      <li>player 8</li>
      <li>player 9</li>
      <li>player 10</li>
  </ul>
  <ul class="bench">
      <li>player 11</li>
  </ul>
  <pre class="out">

  </pre>
</body>
</html>

## movable.js
var $ = document.querySelectorAll.bind(document);

function moveable(containers, selector, dataFn) {
    var dragSource,
        dragCollection,
        dragTarget,
        dragData,
        data = [],
        elements = [];

    function preventDefault(event) {
        event.stopPropagation();
        event.preventDefault();
    }
    [].forEach.call(containers, function (container, index) {
        elements[index] = [];
        function findAndRemove(items,item) {
          var retval;
          items.forEach(function(row) {
            var index = row.indexOf(item);
            if(index > -1) {
              retval = row.splice(index, 1)[0];
            }
          });
          return retval;
        }
        elements[index].push.apply(
          elements[index],
          container.querySelectorAll(selector)
        );
        container.addEventListener("dragenter", preventDefault, false);
        container.addEventListener('dragover', preventDefault, false);
        container.addEventListener('drop', function () {
            var insertIndex = data[index].push(dragData)-1;
            if((data.validate && data.validate(data)) || !data.validate) {
              dragSource.parentElement.removeChild(dragSource);
              if(dragTarget) {
                container.insertBefore(dragSource, dragTarget);
                dragTarget = null;
              } else {
                container.appendChild(dragSource);
              }
              elements[index].push(dragSource);
              data.change && data.change(data);
              dragSource = null;
              dragData = null;
            } else {
              data[index].splice(insertIndex,1);
              elements[dragCollection].push(dragSource);
              data[dragCollection].push(dragData);
            }
        });
        data[index] = elements[index].map(function (element) {
            var container = element.parentElement,
                meta;
            element.setAttribute('draggable', true);
            element.addEventListener('dragstart', function (event) {
              dragSource = findAndRemove(elements,element);
              dragData = findAndRemove(data,meta);
              dragCollection = index;
              event.stopPropagation();
            });
            element.addEventListener('dragover', preventDefault);
            element.addEventListener('dragend', function () {
                /*if (dragSource) {
                    container.appendChild(dragSource);
                    data[index].push(dragData);
                    dragSource = null;
                    dragData = null;
                }*/
            });
            element.addEventListener('drop', function () {
              dragTarget = element;
            });
            meta = (dataFn ? dataFn(element) : element);
          return meta;
        });
    });
    return data;
}

function ListItem(e) {
    this.text = e.textContent;
}

var items = moveable($('ul'), 'li', function (e) {
    return new ListItem(e);
});

var $out = document.querySelector('.out');
$out.textContent = JSON.stringify(items, null, 2);
function players() {
  return items.slice(0, 4).reduce(function(sum, row, index) {
    console.log(index, ':', row.length)
    return sum + row.length;
  }, 0);
}
items.validate = function(data) {
  console.log(players() === 11 && data[0].length === 1);
  return players() <= 11 && data[0].length === 1;
};
items.change = function(data) {
  $out.textContent = JSON.stringify(data, null, 2);
};
	ul {
	min-height: 6em;
	width: 100%;
	text-align: center;
	margin:0px;
	display:-webkit-box;
	display:-moz-box;
	display:box;
	-webkit-box-orient:horizontal;
	-moz-box-orient:horizontal;
	box-orient:horizontal;}
	ul li {
	list-style-type: none;
	padding: 3em;
	-webkit-box-flex:1;
	-moz-box-flex:1;
	box-flex:1;
	}
	.bench {
	background-color: wheat;
	}
	.field {
	background-color: lightgreen;
	}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>JS Bin</title>
	</head>
	<body>
	<ul class="field">
	<li>player 0</li>
	</ul>
	<ul class="field">
	<li>player 1</li>
	<li>player 2</li>
	<li>player 3</li>
	</ul>
	<ul class="field">
	<li>player 4</li>
	<li>player 5</li>
	<li>player 6</li>
	<li >player 7</li>
	</ul>
	<ul class="field">
	<li>player 8</li>
	<li>player 9</li>
	<li>player 10</li>
	</ul>
	<ul class="bench">
	<li>player 11</li>
	</ul>
	<pre class="out">

	</pre>
	</body>
	</html>
	var $ = document.querySelectorAll.bind(document);

	function moveable(containers, selector, dataFn) {
	var dragSource,
	dragCollection,
	dragTarget,
	dragData,
	data = [],
	elements = [];

	function preventDefault(event) {
	event.stopPropagation();
	event.preventDefault();
	}
	[].forEach.call(containers, function (container, index) {
	elements[index] = [];
	function findAndRemove(items,item) {
	var retval;
	items.forEach(function(row) {
	var index = row.indexOf(item);
	if(index > -1) {
	retval = row.splice(index, 1)[0];
	}
	});
	return retval;
	}
	elements[index].push.apply(
	elements[index],
	container.querySelectorAll(selector)
	);
	container.addEventListener("dragenter", preventDefault, false);
	container.addEventListener('dragover', preventDefault, false);
	container.addEventListener('drop', function () {
	var insertIndex = data[index].push(dragData)-1;
	if((data.validate && data.validate(data)) \|\| !data.validate) {
	dragSource.parentElement.removeChild(dragSource);
	if(dragTarget) {
	container.insertBefore(dragSource, dragTarget);
	dragTarget = null;
	} else {
	container.appendChild(dragSource);
	}
	elements[index].push(dragSource);
	data.change && data.change(data);
	dragSource = null;
	dragData = null;
	} else {
	data[index].splice(insertIndex,1);
	elements[dragCollection].push(dragSource);
	data[dragCollection].push(dragData);
	}
	});
	data[index] = elements[index].map(function (element) {
	var container = element.parentElement,
	meta;
	element.setAttribute('draggable', true);
	element.addEventListener('dragstart', function (event) {
	dragSource = findAndRemove(elements,element);
	dragData = findAndRemove(data,meta);
	dragCollection = index;
	event.stopPropagation();
	});
	element.addEventListener('dragover', preventDefault);
	element.addEventListener('dragend', function () {
	/*if (dragSource) {
	container.appendChild(dragSource);
	data[index].push(dragData);
	dragSource = null;
	dragData = null;
	}*/
	});
	element.addEventListener('drop', function () {
	dragTarget = element;
	});
	meta = (dataFn ? dataFn(element) : element);
	return meta;
	});
	});
	return data;
	}

	function ListItem(e) {
	this.text = e.textContent;
	}

	var items = moveable($('ul'), 'li', function (e) {
	return new ListItem(e);
	});

	var $out = document.querySelector('.out');
	$out.textContent = JSON.stringify(items, null, 2);
	function players() {
	return items.slice(0, 4).reduce(function(sum, row, index) {
	console.log(index, ':', row.length)
	return sum + row.length;
	}, 0);
	}
	items.validate = function(data) {
	console.log(players() === 11 && data[0].length === 1);
	return players() <= 11 && data[0].length === 1;
	};
	items.change = function(data) {
	$out.textContent = JSON.stringify(data, null, 2);
	};