Создание односторонней границы без изменения размера <div>в сетке начальной загрузки

Question

Я реализую нативный DnD в html5 для сетки начальной загрузки 3, и я пытаюсь сгенерировать индикаторы, перетаскивая их между двумя элементами, чтобы сообщить пользователю, что он может уронить элемент в этом месте.

Прямо сейчас я добавляю border-left и border-right всякий раз, когда перетаскивание находится на левой или правой стороне элемента.Это в принципе работает нормально, но при перетаскивании границ к следующему элементу граница переходит при изменении размера div.

Я пробовал это с

• outline -> не могуСоздать контур только для одной стороныhover должен имитировать DnD; js только для демонстрационных целей)

  Редактировать: моя цель - создать одну непротиворечивую линию между двумя полями без какого-либо изменения размера контейнера.Я хотел бы сделать это без генерации каких-либо дополнительных элементов HTML.

  Любая помощь приветствуется, спасибо

Answer 1

настроил границу так, чтобы всегда была граница слева и справа - но прозрачная ...

.row>div {
  padding: 20px;
}

.child {
  background-color: red;
  width: 80px;
  height: 80px;
  margin-left: auto;
  margin-right: auto;
}
.col-xs-3{
    border-left:5px dashed transparent;
    border-right:5px dashed transparent;
    margin:0 -2.5px;
}

.col-xs-3:nth-of-type(odd):hover{
  border-right: 5px dashed black !important;
}
.col-xs-3:nth-of-type(even):hover{
  border-left: 5px dashed black !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class='row'>
  <div class="col-xs-3">
    <div class="child" id="1">
      #
    </div>
  </div>
  <div class="col-xs-3">
    <div class="child" id="2">
      #
    </div>
  </div>
  <div class="col-xs-3">
    <div class="child" id="3">
      #
    </div>
  </div>
  <div class="col-xs-3">
    <div class="child" id="4">
      #
    </div>
  </div>
</div>

Answer 2

Я пытался дать решение с вашим вопросом, как я понял.Я дал фрагмент ниже. Пожалуйста, проверьте и дайте мне знать, это то, что вы хотите?Вы можете сделать это в CSS.

.row>div {
  padding: 20px;
}

.child {
  background-color: red;
  width: 80px;
  height: 80px;
  margin-left: auto;
  margin-right: auto;
}
.col-xs-3:nth-of-type(odd):hover{
  border-right: 5px dashed black !important;
}
.col-xs-3:nth-of-type(even):hover{
  border-left: 5px dashed black !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class='row'>
  <div class="col-xs-3">
    <div class="child" id="1">
      #
    </div>
  </div>
  <div class="col-xs-3">
    <div class="child" id="2">
      #
    </div>
  </div>
  <div class="col-xs-3">
    <div class="child" id="3">
      #
    </div>
  </div>
  <div class="col-xs-3">
    <div class="child" id="4">
      #
    </div>
  </div>
</div>