防止可拖动的 div 彼此靠近放置

Question

我正在使用 jQuery UI 制作一些可以拖放到地图上的图钉。

每个图钉都需要一定数量的来自其他图钉的清晰 space（不能放置在任何其他图钉的大约 30px 范围内），在拖动过程中它周围会显示一个黑色光晕。目前，可以将图钉拖到上方并放置在彼此之上，而我希望将图钉拖动到已放置的图钉周围，如下所示：

是否有 simple/lightweight 足够的方法来做到这一点？提前致谢！

$(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>

Answer 1

我使用 Reverend Pete 在上面建议的 link 使用了 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');
}
});

防止可拖动的 div 彼此靠近放置

Prevent draggable divs from being placed near eachother

css

jquery

jquery-ui

draggable