[Rise]

Retro_1477,
Принцип думаю понятен) Нативный Drag and Drop пример, динамическое создание сетки (Grid), абсолютное позиционирование:

<pre>
Draggable: purple, silver, gray-black, pink-white
Droppable: brown-orange, blue-red, green
Rotatable (dblclick): all draggable, brown-orange
</pre>
<script>
var grid = {
    create: function (type, left, top, cWidth, cHeight, cBg, gWidth, gHeight, gBg, gSpace) {
        var rect = document.createElement('div');
            rect.className = type;
        var style = rect.style;
            style.position = 'absolute';
            style.left = left + 'px';
            style.top = top + 'px';
            // cell
        if (arguments.length < 7) {
            style.width = cWidth + 'px';
            style.height = cHeight + 'px';
            style.background = cBg;
            return rect;
        }
            // grid
        var wSpace = cWidth + gSpace;
        var hSpace = cHeight + gSpace;
        var gWidth = gSpace + gWidth * wSpace;
        var gHeight = gSpace + gHeight * hSpace;
        for (var cTop = gSpace; cTop < gHeight; cTop += hSpace) {
            for (var cLeft = gSpace; cLeft < gWidth; cLeft += wSpace) {
                rect.appendChild(grid.create(type + '-cell', cLeft, cTop, cWidth, cHeight, cBg));
            }
        }
            style.width = gWidth + 'px';
            style.height = gHeight + 'px';
            style.background = gBg;
        return rect;
    }
};
var list = {
    assignProperty: function (nodes, property, value) {
        for (var i = 0; i < nodes.length; i++) {
            nodes[i][property] = value;
        }
    },
    attachEvent: function (nodes, event, listener) {
        for (var i = 0; i < nodes.length; i++) {
            nodes[i].addEventListener(event, listener, false);
        }
    },
    appendTo: function (nodes, parent) {
        var f = document.createDocumentFragment();
        for (var i = 0; i < nodes.length; i++) {
            f.appendChild(nodes[i]);
        }
        parent.appendChild(f);
    }
};
var dnd = {
    dragged: null,
    attachDrag: function (nodes, onDragStart) {
        list.assignProperty(nodes, 'draggable', true);
        list.attachEvent(nodes, 'dragstart', onDragStart);
    },
    attachDrop: function (nodes, onDragOver, onDrop) {
        list.attachEvent(nodes, 'dragover', onDragOver);
        list.attachEvent(nodes, 'drop', onDrop);
    }
};

var ships = []
ships.push(grid.create('ship', 400, 30, 40, 40, 'purple'));
ships.push(grid.create('ship', 400, 90, 60, 20, 'silver'));
ships.push(grid.create('ship', 400, 130, 20, 20, 'black', 1, 2, 'gray', 5));
ships.push(grid.create('ship', 400, 200, 10, 20, 'white', 3, 1, 'pink', 10));

dnd.attachDrag(ships, function (e) {
    e.dataTransfer.setData('text', '');
    dnd.dragged = e.target;
});

var seas = [];
seas.push(grid.create('sea', 10, 70, 20, 40, 'orange', 8, 4, 'brown', 10));
seas.push(grid.create('sea', 120, 100, 20, 20, 'red', 10, 5, 'blue', 5));
seas.push(grid.create('sea', 30, 150, 25, 15, 'green', 10, 10, 'transparent', 1));

dnd.attachDrop(seas, function (e) { e.preventDefault(); }, function (e) { e.preventDefault();
    if (e.target.classList.contains('sea-cell')) {
        dnd.dragged.style.left = this.offsetLeft + e.target.offsetLeft + 'px';
        dnd.dragged.style.top = this.offsetTop + e.target.offsetTop + 'px';
    }
});
list.attachEvent(ships.concat(seas[0]), 'dblclick', function (e) {
    var s = this.style, c = this.children;
    var w = s.width, h = s.height;
    if (w == h) return;
    s.width = h, s.height = w;
    for (var i = 0; i < c.length; i++) {
        s = c[i].style;
        w = s.width, h = s.height;
        if (w != h) s.width = h, s.height = w;
        w = s.left, h = s.top;
        if (w != h) s.left = h, s.top = w;
    }
});

list.appendTo(seas.concat(ships), document.body);
</script>