Question

I am using jQuery UI to make some elements draggable and droppable. Much like a sortable, I’m trying to arrange the dragged element left/right/above/below to a hovered element when it’s dropped. Also, I want to show an indicator on hovering another element, where the element will be arranged to, when it’s dropped.

The behaviour should be, the the element will be dropped left of the hovered element if the cursor hovers the left third of the element. It should be dropped right of the hovered element if the cursor is above the right third of the hovered element. In script.aculo.us, there’s a parameter called ‘overlap’ which indicates the mouse-overlap in percent of the hovered element.

Is there something similar in jQuery UI or how can this be done?

Answer 1

Ok, here’s one way to do this. Basically, the idea is to read the offset, width and height of a droppable once a draggable is dragged over it. And while an element is dragged and the other element is hovered, the overlap is calculated using the mouse-position, the offset and the dimensions of the element (the offset is subtracted from the mouse-position and compared to the droppable’s dimensions):

$(function() {

    var offx, offy, w, h,
        isOverEl = false;

    $( ".component" ).draggable({
       drag: function(event, ui) {

         if(!isOverEl) return;

         console.log(
           ((event.pageY-offy)/h)*100, // returns vertical overlap in %
           ((event.pageX-offx)/w)*100  //returns horizontal overlap in %
         )

       }
    });

    $( ".component" ).droppable({

    over: function(event, ui) {

      var $this  = $(this),
          offset = $this.offset();

      offx = offset.left;
      offy = offset.top;

      w = $this.outerWidth();
      h = $this.outerHeight();

      isOverEl = true;

    },

    out: function(event, ui) {
      isOverEl = false;
    }

  });

});