question-mark

Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Fix jquery.event.drag suppressing native drag and drop

See original GitHub issue

Issue Description

I am using slickgrid in combination with fullcalendar and some custom component using native drag and drop.

Problem:

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 mousedown events 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 mousedown event handler via jQuery on document… No native drag and drop on the whole page.

I see two possible solutions:

  1. fix jquery.event.drag: make it never return false by removing the return false statement.
				// // helps prevent text selection or scrolling
				// if ( !drag.touched || dd.live )
				//     return false;

(Developers should care for text selection themselves via CSS: user-select: none;) I can provide a pull request for this, if you want.

  1. 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.

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:12 (5 by maintainers)

github_iconTop GitHub Comments

1reaction
ghiscodingcommented, Jan 10, 2020

@yamass @loonix Took a look at this and I think I found a solution, by doing a Google search, I found this on Froala GitHub:

The jquery.event.drag has 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.drag is 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).

change from

// 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

EDIT 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.

1reaction
loonixcommented, May 13, 2019

@6pac @ghiscoding made the PR. Any chance you know when this will go in?

Read more comments on GitHub >

github_iconTop Results From Across the Web

jQuery droppable - receiving events during drag over (not just ...
One way to solve both problems is to associate the droppable and the draggable in the over handler, using jQuery's data() facility, ...
Read more >
jquery.event.drag conflicts with events in jquery.ui.draggable
The real solution is to get jquery.event.drag and jquery-ui to resolve their incompatibility. SlickGrid uses/requires jquery.event.drag, and ...
Read more >
Accessible Drag and Drop with Multiple Items - SitePoint
So let's start with a functional example which defines the basic drag and drop events, allowing a single element to be dragged with...
Read more >
jquery.event.drag - ThreeDubMedia
This event fires after "draginit" and "dragstart" and "drag" when the mouse button is released, or when a "drag" event is canceled. This...
Read more >
The HTML5 drag and drop disaster - QuirksBlog - QuirksMode
The drop event fires when the user drops an element he's dragging. And, you see, dropping the element you're dragging is the POINT...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found