防止可拖动的div彼此靠近放置 [英] Prevent draggable divs from being placed near eachother

问题描述

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

I'm using jQuery UI to make some pins which can be dragged & dropped onto a map.

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

Each pin needs a certain amount of clear space from other pins (cannot be placed within about 30px of any other pin) which is shown with a dark halo around it during drag. At the moment the pins can be dragged above and placed on top of each other, whereas I'd like the pin being dragged to manoeuvre around any pins already placed, like so:

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

Is there a simple/lightweight enough way to do that? Thanks in advance!

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

推荐答案

我使用上面的牧师彼得建议的链接使用 JQuery UI可拖动碰撞

I got it to work using Reverend Pete's suggested link above that uses JQuery UI Draggable Collision

jsfiddle.net/RichardGouw/h14jcqvx/28/

我对活动销周围的光晕略有改变，但碰撞效果仍然相同

Slightly changed my mind on there being a halo around the active pin, but the collision effect is still the same

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彼此靠近放置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！