Draggable template has onClick. How to cancel click action after completed drag.

[bobekhj]

As in the title. The Div that I am dragging in the list has an onClick() event which gets triggered every time I drop the div. Is it possible to cancel the onClick() if the div is getting dragged and dropped? Thank you

[Macil]

Here's a diff of the project's example showing how you could do this. The logic here is that if the link has been dragged more than 10px or has been held for more than 1 second, then don't follow the link.

diff --git a/example/Example.js b/example/Example.js
index d0cb820..b6a9a15 100644
--- a/example/Example.js
+++ b/example/Example.js
@@ -1,10 +1,33 @@
 /* @flow */
 /* eslint-disable no-console, react/prop-types */

-import React from 'react';
+import React, {useState} from 'react';
 import cx from 'classnames';
 import DraggableList from '../src';

+function DragIgnoringLink(props) {
+  const [mouseDownY, setMouseDownY] = useState(null);
+  const [mouseDownTime, setMouseDownTime] = useState(null);
+  return <a
+    {...props}
+    onMouseDown={event => {
+      setMouseDownY(event.pageY);
+      setMouseDownTime(Date.now());
+      if (props.onMouseDown) props.onMouseDown(event);
+    }}
+    onClick={event => {
+      const yDiff = mouseDownY == null ? 0 : Math.abs(event.pageY - mouseDownY);
+      const timeDiff = mouseDownTime == null ? 0 : Date.now() - mouseDownTime;
+      if (yDiff > 10 || timeDiff > 1000) {
+        event.preventDefault();
+        event.stopPropagation();
+        return;
+      }
+      if (props.onClick) props.onClick(event);
+    }}
+  />;
+}
+
 type PlanetListItem = {
   name: string;
   subtitle?: boolean;
@@ -48,7 +71,11 @@ class PlanetItem extends React.Component<PlanetProps, PlanetState> {
           boxShadow: `rgba(0, 0, 0, 0.3) 0px ${shadow}px ${2 * shadow}px 0px`
         }}
       >
-        <div className="dragHandle" {...dragHandleProps} />
+        <div className="dragHandle" {...dragHandleProps}>
+          <DragIgnoringLink
+            href="https://example.com" target="_blank" rel="noopener noreferrer"
+          >link</DragIgnoringLink>
+        </div>
         <h2>{ item.name }</h2>
         {item.subtitle &&
           <div className="subtitle">This item has a subtitle visible while dragging</div>

(It might be possible for react-draggable-list automatically apply this behavior, but I'm not sure it should. The workaround has a few free parameters I don't want the library to be in control of. I'm not sure the design of having clickables inside of drag handles is something the library should standardize. I would be fine with putting this above workaround in an extra example in the project.)

[bobekhj]

Nice! Thanks