Сделать одну границу из нескольких div с границами - PullRequest
Новая
       11

Сделать одну границу из нескольких div с границами

0 голосов
/ 11 мая 2018

gif

Все элементы являются перетаскиваемыми (jquery-ui) с функцией snap .

Каждый div имеет границу, поэтому, если два div находятся в стороне друг от друга, он будет иметь двойную границу. В функции привязки jquery-ui вы можете видеть, какие div привязываются друг к другу, но не с какой стороны.

Как я могу проверить, какие div сталкиваются, чтобы я мог удалить границу 1 div, чтобы она была единственной границей между div?

1 Ответ

0 голосов
/ 11 мая 2018

Вы можете сделать эту настройку для каждого <DIV>, отображаемого как часть таблицы. Это немного сложно. Как уже упоминалось, вы можете просто настроить margin: -1px;. Мне также очень нравится предложение box-shadow. Пример: 

$(function() {
  $(".drag").draggable({
    containment: "parent",
    handle: ".drag-handle",
    snap: true
  });
  $(".drag-handle").each(function(ind, el) {
    var $par = $(el).parent();
    $(el).position({
      my: "right top",
      at: "right-5 top+5",
      of: $par
    });
  });
});
.canvas {
  border: 2px solid #000;
  display: inline-block;
  border-collapse: collapse;
  width: 440px;
  height: 300px;
}

.drag {
  /*
  border: 1px solid #000;
  */
  box-shadow: 1px 0px #000, 0px 1px #000, 1px 1px #000, 1px 0px #000 inset, 0px 1px #000 inset;
  float: left;
}

.drag label {
  margin: 2px;
}

.drag .drag-handle {
  border-radius: 6px;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="canvas ui-widget">
  <div id="item-1" class="drag" style="width: 100%; height: 90px;">
    <label>DIV 1</label>
    <span class="ui-icon ui-icon-arrow-4 drag-handle"></span>
  </div>
  <div id="item-2" class="drag" style="width: 50%; height: 60px;">
    <label>DIV 2</label>
    <span class="ui-icon ui-icon-arrow-4 drag-handle"></span>
  </div>
  <div id="item-3" class="drag" style="width: 50%; height: 60px;">
    <label>DIV 3</label>
    <span class="ui-icon ui-icon-arrow-4 drag-handle"></span>
  </div>
  <div id="item-4" class="drag" style="width: 100%; height: 80px;">
    <label>DIV 4</label>
    <span class="ui-icon ui-icon-arrow-4 drag-handle"></span>
  </div>
</div>

Адаптировано из ответа, увиденного здесь: Как заставить границы свернуть (на div)?

...