m-bo-one/battle shift

## battle shift
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        table {
            border-collapse: collapse; /* Убираем двойные линии между ячейками */
            border: 1px solid black; /* Параметры рамки */
        }
        tr, td {
            padding: 3px; /* Поля вокруг содержимого таблицы */
            border: 1px solid black; /* Параметры рамки */
        }
        .draggable {
            width: 90px;  /* Ширина таблицы */
            height: 30px;
        }
        .battle-map {
            width: 300px;  /* Ширина таблицы */
            height: 300px;
        }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js" type="text/javascript"></script>
</head>
<body>
    <table class="battle-map"></table>
    <div class="draggable ship-3-hor">111</div>
    <script type="text/javascript">
        $(function () {
            var cSize = 10,
                _inner_cells,
                pos_place = ['hor', 'vert'];
            create_table_rows();
            $('.draggable').draggable({
                cursor: "crosshair",
                stop: function(event, ui) {
                    $draggable = this;
                    console.log('stop');
                    $.each($('table.battle-map td'), function(index, value) {
                        var get_elem_on_cell = elem_on_cell($(this));
                        if (get_elem_on_cell.finded) {
                            var current_pos = get_elem_pos($draggable);
                            if (current_pos != undefined) {
                                var col = get_elem_on_cell.col;
                                var row = get_elem_on_cell.row;
                                if (current_pos == 'hor') {
                                    var prev_col = col - 1;
                                    var nex_col = col + 1;
                                    if (prev_col < 0 || nex_col > cSize - 1) {
                                        return;
                                    }
                                    var prev_col_elem = $('table.battle-map tr:eq('+row+') td:eq('+prev_col+')');
                                    var current_col_elem = $('table.battle-map tr:eq('+row+') td:eq('+col+')');
                                    var next_col_elem = $('table.battle-map tr:eq('+row+') td:eq('+nex_col+')');
                                    if (prev_col_elem.html() == 1 ||
                                        current_col_elem.html() == 1 ||
                                        next_col_elem.html() == 1) {
                                        return;
                                    }
                                    prev_col_elem.html(1);
                                    current_col_elem.html(1);
                                    next_col_elem.html(1);
                                }
                                else if (current_pos == 'vert') {
                                    var prev_row = row - 1;
                                    var nex_row = row + 1;
                                }
                            }
                        }
                    });
                }
            });
            function create_table_rows() {
                for (var i = 0; i < cSize; i++) {
                    _inner_cells = "<tr>";
                    for (var j = 0; j < cSize; j++) {
                        _inner_cells += "<td>" + 0 + "</td>";
                    }
                    _inner_cells += "</tr>";
                    $('table.battle-map').append(_inner_cells);
                }
            }
            function elem_on_cell(elem) {
                var cell_coords = elem.offset();
                var start_X = cell_coords.left;
                var start_Y = cell_coords.top;
                var end_X = cell_coords.left + elem.width();
                var end_Y = cell_coords.top + elem.height();
                if (start_X <= event.pageX && event.pageX <= end_X && start_Y <= event.pageY && event.pageY <= end_Y) {
                    var col = elem.index();
                    var row = elem.parent().index();
                    return {
                        finded: true,
                        col: col,
                        row: row
                    }
                }
                return {
                    finded: false
                }
            }
            function get_elem_pos(elem) {
                for (var i = 0; i < pos_place.length; i++) {
                    if (elem.className.match('-' + pos_place[i]) != null) {
                        return pos_place[i];
                    }
                }
            }
        });
    </script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title></title>
	<style type="text/css">
	table {
	border-collapse: collapse; /* Убираем двойные линии между ячейками */
	border: 1px solid black; /* Параметры рамки */
	}
	tr, td {
	padding: 3px; /* Поля вокруг содержимого таблицы */
	border: 1px solid black; /* Параметры рамки */
	}
	.draggable {
	width: 90px; /* Ширина таблицы */
	height: 30px;
	}
	.battle-map {
	width: 300px; /* Ширина таблицы */
	height: 300px;
	}
	</style>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js" type="text/javascript"></script>
	</head>
	<body>
	<table class="battle-map"></table>
	<div class="draggable ship-3-hor">111</div>
	<script type="text/javascript">
	$(function () {
	var cSize = 10,
	_inner_cells,
	pos_place = ['hor', 'vert'];
	create_table_rows();
	$('.draggable').draggable({
	cursor: "crosshair",
	stop: function(event, ui) {
	$draggable = this;
	console.log('stop');
	$.each($('table.battle-map td'), function(index, value) {
	var get_elem_on_cell = elem_on_cell($(this));
	if (get_elem_on_cell.finded) {
	var current_pos = get_elem_pos($draggable);
	if (current_pos != undefined) {
	var col = get_elem_on_cell.col;
	var row = get_elem_on_cell.row;
	if (current_pos == 'hor') {
	var prev_col = col - 1;
	var nex_col = col + 1;
	if (prev_col < 0 \|\| nex_col > cSize - 1) {
	return;
	}
	var prev_col_elem = $('table.battle-map tr:eq('+row+') td:eq('+prev_col+')');
	var current_col_elem = $('table.battle-map tr:eq('+row+') td:eq('+col+')');
	var next_col_elem = $('table.battle-map tr:eq('+row+') td:eq('+nex_col+')');
	if (prev_col_elem.html() == 1 \|\|
	current_col_elem.html() == 1 \|\|
	next_col_elem.html() == 1) {
	return;
	}
	prev_col_elem.html(1);
	current_col_elem.html(1);
	next_col_elem.html(1);
	}
	else if (current_pos == 'vert') {
	var prev_row = row - 1;
	var nex_row = row + 1;
	}
	}
	}
	});
	}
	});
	function create_table_rows() {
	for (var i = 0; i < cSize; i++) {
	_inner_cells = "<tr>";
	for (var j = 0; j < cSize; j++) {
	_inner_cells += "<td>" + 0 + "</td>";
	}
	_inner_cells += "</tr>";
	$('table.battle-map').append(_inner_cells);
	}
	}
	function elem_on_cell(elem) {
	var cell_coords = elem.offset();
	var start_X = cell_coords.left;
	var start_Y = cell_coords.top;
	var end_X = cell_coords.left + elem.width();
	var end_Y = cell_coords.top + elem.height();
	if (start_X <= event.pageX && event.pageX <= end_X && start_Y <= event.pageY && event.pageY <= end_Y) {
	var col = elem.index();
	var row = elem.parent().index();
	return {
	finded: true,
	col: col,
	row: row
	}
	}
	return {
	finded: false
	}
	}
	function get_elem_pos(elem) {
	for (var i = 0; i < pos_place.length; i++) {
	if (elem.className.match('-' + pos_place[i]) != null) {
	return pos_place[i];
	}
	}
	}
	});
	</script>
	</body>
	</html>