Fix jquery.event.drag suppressing native drag and dropSee original GitHub issue
I am using slickgrid in combination with fullcalendar and some custom component using native drag and drop.
Native drag and drop does not work in our whole application, since jquery.event.drag cancels them globally!
Details / Cause analysis:
- jquery.event.drag registers special drag events (“drag”, “draginit”, “dragstart”, “dragend”)
- These are implemented by listening to mouse and touch events:
$event.add( this, "touchstart mousedown", drag.init, data );(v2.3.0, line 82)
- So when a jquery listener for
mousedownevents is registered to a DOM node (something like
$myDiv.on("mousedown", handleDragStart)), the jquery.event.drag code gets executed.
- jquery.event.drag will however
event.preventDefault()by returning false:
if ( !drag.touched || dd.live ) return false;(v2.3.0, line 158; will return false, since mousedown is not a touch event)
- Now, since fullcalendar registers a
mousedownevent handler via jQuery on
document… No native drag and drop on the whole page.
I see two possible solutions:
- fix jquery.event.drag: make it never return false by removing the
// // helps prevent text selection or scrolling // if ( !drag.touched || dd.live ) // return false;
(Developers should care for text selection themselves via CSS:
I can provide a pull request for this, if you want.
- Remove the dependency to jquery.event.drag completely (or at least make it optional). It is only needed for three things as far as I can see:
- column resizing (can easily be replaced by naive implementation with mouse events)
- slick.cellrangeselector.js plugin
- slick.rowmovemanager.js plugin
- public interface: onDragInit, onDragStart, onDrag, onDragEnd I can provide a pull request for the column resizing implementation, which would make the dependency to jquery.event.drag optional for many developers.
- Created 5 years ago
- Comments:12 (5 by maintainers)
Top GitHub Comments
jquery.event.draghas a not option which defines what elements on the page drag doesn’t apply to. If you set that option to
.froala-box *, .froala-editor *it works very well. From my point of view,
jquery.event.dragis not implemented right because by default it prevents clicking on all elements from the page except input tags.
With this in mind, I came up with 2 lines of code to change in the
slick.event.drag.js file. It will discard any DOM elements that doesn’t start with the word
slick, by doing so we are making sure that we are in a Slick Grid. This should fix all issues (Froala and Full Date Calendar).
// check for suppressed selector if ( $( event.target ).is( dd.not ) )
to this new change
// check for suppressed selector // make sure the target css class starts with "slick-" so that we know it's in a Slick Grid and not outside of it var targetClass = $( event.target ).attr('class') || ""; if ( $( event.target ).is( dd.not ) || (!targetClass || targetClass.toString().indexOf('slick-') === -1)) return;
I’ll make a PR soon, though I would be happy to get some feedback
After some tweaking, I tested the fix with the Froala version (an older version,
2.3.5) that was causing the issue and it works. So I’m quite sure that this patch will close this issue. I also tested a few of the SlickGrid examples (column resize, column drag, cell selection to copy) and everything works. I will prepare a PR then.