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

Question

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

每个图钉都需要与其他图钉保持一定的净空空间（不能放置在任何其他图钉的30像素之内），在拖动过程中，该图腾周围带有黑色光晕。目前，可以将图钉拖动到彼此上方并放置在彼此之上，而我希望将图钉拖动以围绕已放置的任何图钉进行操作，例如：

是否有足够简单/轻巧的方法来做到这一点？预先感谢！

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

我可以使用上面使用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');
}
});