CODEWITHSUNDEEP
jquerycssjquery-uidraggable
Richard Gouw
Richard Gouw

Reputation: 207

Prevent draggable divs from being placed near eachother

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

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:

enter image description here

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>

Upvotes: 2

Views: 206

Answers (1)

Richard Gouw
Richard Gouw

Reputation: 207

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');
}
});

Upvotes: 1

Related Questions