Предотвратить перетаскиваемые элементы div рядом друг с другом - PullRequest
Новая
       49

Предотвратить перетаскиваемые элементы div рядом друг с другом

2 голосов
/ 03 мая 2019

Я использую пользовательский интерфейс jQuery для создания некоторых пинов, которые можно перетаскивать на карту.

Каждому выводу требуется определенное количество свободного пространства от других выводов (не может быть размещено в пределах 30 пикселей от любого другого вывода), который отображается с темным ореолом вокруг него во время перетаскивания. В данный момент штифты можно перетаскивать выше и размещать друг над другом, тогда как я хотел бы, чтобы штифт перетаскивался для маневрирования вокруг любых уже установленных штифтов, например:

enter image description here

Есть ли простой / достаточно легкий способ сделать это? Заранее спасибо! 

$(document).ready(function() {
  $(".pin").draggable({
    grid: [ 5, 5 ],
    start: function(e, ui) {
      $(this).addClass('placed');
      $('.placed').css('box-shadow' , '0 0 0 15px rgba(0, 0, 0, 0.3), 0 7px 10px 0 rgba(0, 0, 0, 0.7)');
  },
    stop: function(e, ui) {
      $('.pin').css('box-shadow' , '0 0 0 0 rgba(0, 0, 0, 0), 0 3px 8px 0 rgba(0, 0, 0, 0.3)');
  }
  });
});
.pin {
  width: 20px;
  height: 20px;
  background-color: #65C02F;
  border-radius:20px;
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
  border: 2px solid #FFF;
  margin: 10px;
  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0), 0 4px 6px 0 rgba(0, 0, 0, 0.3);
  cursor: pointer;
  z-index: 2;
  transition: box-shadow 0.2s;
  } 
.pin:hover {
  background-color: #50A71C;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>

<div class="pin"></div>
<div class="pin"></div>
<div class="pin"></div>
<div class="pin"></div>

1 Ответ

1 голос
/ 07 мая 2019

Я заставил его работать, используя приведенную выше ссылку Преподобного Пита, в которой используется JQuery UI Draggable Collision

jsfiddle.net / RichardGouw / h14jcqvx / 28 /

Немного изменил свое мнение о наличии ореола вокруг активной булавки, но эффект столкновения все тот же

HTML 

<script src="http://code.jquery.com/jquery-1.7.2.js"></script>
<script src="http://code.jquery.com/ui/1.8.18/jquery-ui.js"></script>
<!-- Include links to UI Draggable Collision files -->

<div class="pin"></div>
<div class="pin"></div>
<div class="pin"></div>
<div class="pin"></div>

CSS 

.pin {
    width: 20px;
    height: 20px;
    background-color: #65C02F;
    margin: 7px;
    border-radius: 20px;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    -moz-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    transition: box-shadow 0.2s;
}

.pin.placed.boundary {
    box-shadow: 0 0 0 15px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: 0 0 0 15px rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: 0 0 0 15px rgba(0, 0, 0, 0.4);
}

JQuery 

// make pins draggable (using jQuery UI)
$(".pin").draggable({

// apply collision effect (using UI Draggable Collision)
obstacle: ".placed",
preventCollision: true,

// optional, snap to pixel grid (using jQuery UI)
grid: [5,5],

// animate on start of drag (using jQuery UI)
start: function(e, ui) {
  $(this).removeClass('placed'),
  $('.placed').addClass('boundary');
},

// animate on end of drag (using jQuery UI)
stop: function(e, ui) {
  $(this).addClass('placed'),
  $('.placed').removeClass('boundary');
}
});
...