taye / interact.js

JavaScript drag and drop, resizing and multi-touch gestures with inertia and snapping for modern browsers (and also IE9+)
http://interactjs.io/
MIT License
12.38k stars 785 forks source link

How to make the dropzone accept the draggable element upon slightest overlap #272

Closed HerrimanCoder closed 9 years ago

HerrimanCoder commented 9 years ago

I had a need to remove the following 2 styles from the .dropzone class, in order to get finer-grain control of positioning, widths, heights:

/* padding: 1em; */ /* line-height: 4em; */

To compensate, I then made the width and height of the dropzones larger, as expected.

Consequently, a minor inconvenience from before has become a larger problem for me: when I drag a draggable element over the top of any dropzone, the dropzone doesn't "light up" (aka, recognize the element and allow the drop to occur) until the forward-most edge of the draggable element reaches the center of the dropzone.

How can I change this so that my dropzone lights up, recognizes the element, and allows the drop to occur when the element touches any part of the drop zone, rather than requiring the element to go deep in, all the way to the center? Thanks in advance.

taye commented 9 years ago

http://interactjs.io/docs/#dropzone-accept

HerrimanCoder commented 9 years ago

The useful one I needed was here: http://interactjs.io/docs/#dropzone-overlap

This solved my problem perfectly: overlap: 0.2

Thanks for pointing me to the right general area, I appreciate it.