Fix jquery.event.drag suppressing native drag and drop

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.

[ghiscoding]

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

[loonix]

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