0

After some testing, my Droppable elements only accept Draggable elements when the center of the Draggable is in the Droppable.

How can I change this behavior to accept a Draggable when its top left corner is inside a Droppable?

NOTE: The Draggables are larger than the Droppables.

Danziger
  • 19,628
  • 4
  • 53
  • 83
Kyle Brown
  • 303
  • 4
  • 14
  • I figure there is something in the API i am not seeing – Kyle Brown Jan 22 '18 at 21:53
  • @AlonEitan The question probably lacks some evidence of what he has been actually testing, but I think it is quite clear as long as you are familiar with jQuery UI's jargon ([Draggable](http://api.jqueryui.com/draggable/) and [Droppable](http://api.jqueryui.com/droppable/), in this case). I will edit it to try to make it a bit more clear though. – Danziger Jan 25 '18 at 20:18

1 Answers1

1

Maybe some of the non-default values of droppable's tolerance option can be a good alternative for you, although they will not do exactly what you are asking for.

From the docs:

Specifies which mode to use for testing whether a draggable is hovering over a droppable. Possible values:

  • "fit": Draggable overlaps the droppable entirely.
  • "intersect": Draggable overlaps the droppable at least 50% in both directions.
  • "pointer": Mouse pointer overlaps the droppable.
  • "touch": Draggable overlaps the droppable any amount.

The default one is "intersect". I would consider using either "pointer" or "touch".

Alternatively, if you really need to use the top left corner as a reference, then you should overwrite $.ui.intersect, which is the function that takes care of checking whether a dragabble and a droppable intersect, based on the tolerance mode. It should return true if they do or false otherwise. It looks something like this:

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

    swtich(toleranceMode) {
        // Check if they intersect based on the selected mode.
        default:
            return false;
    }
}

You need to redefine that function and add a custom case block, while keeping the original modes as well. Otherwise, some other parts of the code that depend on that (maybe some other jQuery UI components), will break.

However, that will only work for jQuery UI < 1.12. If you are using a newer version, you will have to overwrite some other methods. You can find a detailed answer with code examples of that here: Build the matching option for jQuery UI Droppable's Intersect tolerance

Danziger
  • 19,628
  • 4
  • 53
  • 83
  • 1
    Sorry for the unclear question, this is what I was looking for though! Thanks! – Kyle Brown Jan 23 '18 at 14:05
  • This is the correct answer. I was looking for the same. "pointer" is what you are looking for. It triggers droppable on the droppable element that is underneath the cursor when you drop the draggable. When your drag element is bigger than the droppable element it can be hard to move the center into the droppable. Especially when you are using a containment element and trying to move it to an edge. – Eddie May 31 '19 at 20:51