4

В общем, игра "Морской бой". Есть картинки кораблей (именно картинки), их нужно перенести на поле. Сделать их переносимыми - не проблема. Вопрос в том, что при наведении на поле, которое, по сути, является table, корабли должны как-то прилипать к клетками. Причем разные корабли занимают разное количество клеток. Здесь вообще ступор, даже не знаю, в каком направлении думать. Кто-нибудь, кто шарит, может подсказать?

1 ответ 1

3

Клеточки я нарисовал градиентом и указал что элементы перемещаются влево вправо с шагом в одну клетку. Если все-таки хочешь сделать через table, то ты можешь указать к каким элементам (через селекторы) он должен "прилипать" (свойство snap) например:

$(".boat").draggable({
    snap: "td"        
  });

$(function() {
  $(".boat").draggable({
    containment: "#grid",
    grid: [$(".boat").width() + 2, $(".boat").height() + 2]
  });
});
.boat {
  font-size: x-large;
  border: 1px solid;
  box-sizing: border-box;
  width: 50px;
  height: 50px;
  text-align: center;
  cursor: pointer;
  background-color: green;
}

.boat#two {
  height: 100px;
}

.boat#three {
  width: 100px;
}

#grid {
  width: 500px;
  height: 400px;
  background: linear-gradient(black, transparent 1px),
    linear-gradient(90deg, black, transparent 1px);
  background-size: 50px 50px;
  border: 1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link href="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.3/themes/sunny/jquery-ui.css" rel="stylesheet"/>

<div id="grid">

  <div id="one" class="boat ui-widget">
    1
  </div>

  <div id="two" class="boat ui-widget">
    2
  </div>
  
   <div id="three" class="boat ui-widget">
    3
  </div>
</div>

1
  • Нужно чуть поработать над скриптом. А так неплохо
    – Yuri
    29 июл 2017 в 15:57

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.