HTML Drag and drop - прилипание элементов к table

214

27 июля 2017, 00:10

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

Answer 1

Клеточки я нарисовал градиентом и указал что элементы перемещаются влево вправо с шагом в одну клетку. Если все-таки хочешь сделать через 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>