jquery.pep.js draggable/droppable functionality

– 06/03/13

Recently, I released a new version of jquery.pep.js, which adds in droppable functionality.

For example, when an object overlaps a target, you can perform various actions on the object in question as well as the overlapping targets.

Let’s say you had a div with a class of pep and another div with a class of drop-target, here is some example JS to make .pep and .drop-target interact in a draggable/droppable manner.

$('.pep').pep({
  droppable: '.drop-target',
  stop: function(ev, obj){
    obj.activeDropRegions // an array of all active drop regions.
  }
});

Demo #1 - Draggable

In this demo, we use Pep’s built-in draggable functionality; that is, when an object overlaps a target, the target becomes highlighted.

Check out this Pen!

Demo #2 - Custom Overlap Function

In this demo, we use a custom overlap function. Pep’s default behavior is to consider an object overlapping if any part of the object is over the target, but in this demo we consider an object to be overlapping if the entire object is inside the target.

Check out this Pen!

Demo #3 - Consuming Parent

In this demo, as your drag around the object, we can check if the object overlaps one of the targets when the stop event is triggered. If it is, we can center in the target, which gives the effect that the target “consumes” the object.

Check out this Pen!

Interested? Check out jquery.pep.js on Github.