Jquery Ui Set Up My Own Tolerance

I´m working on game for my little baby. I want to change default tolerance in droppable object. I know, that there are default values like touch, fit, intersect and pointer. But i

Solution 1:

You could modify intersect function of jquery-ui to allow this. Most flexible way would be to be able to add a custom function returning true when droppable should be activated, and false when not. This would give complete control on the tolerance. Something like this:

$.ui.intersect = function(draggable, droppable, toleranceMode) {

  if (!droppable.offset) {
    returnfalse;
  }

  var draggableLeft, draggableTop,
    x1 = (draggable.positionAbs || draggable.position.absolute).left,
    y1 = (draggable.positionAbs || draggable.position.absolute).top,
    x2 = x1 + draggable.helperProportions.width,
    y2 = y1 + draggable.helperProportions.height,
    l = droppable.offset.left,
    t = droppable.offset.top,
    r = l + droppable.proportions.width,
    b = t + droppable.proportions.height;
  
  // With next line this allows to set a function as toleranceModeif (typeof toleranceMode === "function") {
    returntoleranceMode(draggable, droppable);
  } else {
    // If it's not a function, then normal code appliesswitch (toleranceMode) {
      case"custom":
        return (l < x1 + (draggable.helperProportions.width / 2) && // Right Half
          x2 - (draggable.helperProportions.width / 2) < r && // Left Half
          t < y1 && // Bottom Half
          b > y1 + 15); // Top Halfcase"fit":
        return (l <= x1 && x2 <= r && t <= y1 && y2 <= b);
      case"intersect":
        return (l < x1 + (draggable.helperProportions.width / 2) && // Right Half
          x2 - (draggable.helperProportions.width / 2) < r && // Left Half
          t < y1 + (draggable.helperProportions.height / 2) && // Bottom Half
          y2 - (draggable.helperProportions.height / 2) < b); // Top Halfcase"pointer":
        draggableLeft = ((draggable.positionAbs || draggable.position.absolute).left + (draggable.clickOffset || draggable.offset.click).left);
        draggableTop = ((draggable.positionAbs || draggable.position.absolute).top + (draggable.clickOffset || draggable.offset.click).top);
        returnisOverAxis(draggableTop, t, droppable.proportions().height) && isOverAxis(draggableLeft, l, droppable.proportions().width);
      case"touch":
        return (
          (y1 >= t && y1 <= b) || // Top edge touching
          (y2 >= t && y2 <= b) || // Bottom edge touching
          (y1 < t && y2 > b) // Surrounded vertically
        ) && (
          (x1 >= l && x1 <= r) || // Left edge touching
          (x2 >= l && x2 <= r) || // Right edge touching
          (x1 < l && x2 > r) // Surrounded horizontally
        );
      default:
        returnfalse;
    }
  }

};

$("#draggable").draggable();


$("#droppable").droppable({
  hoverClass: "hover",
  tolerance: function(draggable, droppable) {
    // Calculations will be made on the small div // inside the draggable. This is the equivalent // of touch tolerance, but applied not to the draggable// itself, but to another divvar toleranceDiv = $('#toleranceDiv');
    x1 = toleranceDiv.offset().left,
      y1 = toleranceDiv.offset().top,
      x2 = x1 + toleranceDiv.width(),
      y2 = y1 + toleranceDiv.height(),
      l = droppable.offset.left,
      t = droppable.offset.top,
      r = l + droppable.proportions.width,
      b = t + droppable.proportions.height;
    return (
      (y1 >= t && y1 <= b) || // Top edge touching
      (y2 >= t && y2 <= b) || // Bottom edge touching
      (y1 < t && y2 > b) // Surrounded vertically
    ) && (
      (x1 >= l && x1 <= r) || // Left edge touching
      (x2 >= l && x2 <= r) || // Right edge touching
      (x1 < l && x2 > r) // Surrounded horizontally
    );
  },
  over: function(event, ui) {
    $('#draggable').css('opacity', 0.8);
  },
  out: function(event, ui) {
    $('#draggable').css('opacity', 0.5);
  },
  drop: function(event, ui) {
    console.log('dropped');
  }
});

#draggable {
  width: 100px;
  height: 100px;
  background-color: blue;
  opacity: 0.5;
  position: absolute;
}
#toleranceDiv {
  width: 20px;
  height: 20px;
  top: 30px;
  left: 30px;
  background-color: yellow;
  position: absolute;
}
#droppable {
  width: 200px;
  height: 200px;
  background-color: green;
  opacity: 1;
  top: 250px;
  left: 250px;
  position: absolute;
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script><scripttype="text/javascript"src="//code.jquery.com/ui/1.10.3/jquery-ui.js"></script><divid="droppable"></div><divid="draggable"><divid="toleranceDiv"></div></div>