react-slick icon indicating copy to clipboard operation
react-slick copied to clipboard

Sliding broken when slide content is wrapped in anchor tag

Open selrond opened this issue 5 years ago • 8 comments

example on CodeSandbox

When slide content is wrapped inside <a /> tag, sliding behaves weirdly; unusable on FF and Safari, Chrome deals with it somehow.

I believe this comes from here:

img elements and a elements with an href attribute have their draggable attribute set to true by default.

HTML spec - Drag and drop

Here's the code I think is related to this, with the proposed solution:

export const swipeStart = (e, swipe, draggable) => {
  e.target.tagName === "IMG" && e.preventDefault();

+  // my proposed solution
+  e.target.tagName === "A" && e.preventDefault();

  if (!swipe || (!draggable && e.type.indexOf("mouse") !== -1)) return "";
  return {
    dragging: true,
    touchObject: {
      startX: e.touches ? e.touches[0].pageX : e.clientX,
      startY: e.touches ? e.touches[0].pageY : e.clientY,
      curX: e.touches ? e.touches[0].pageX : e.clientX,
      curY: e.touches ? e.touches[0].pageY : e.clientY
    }
  };
};

source

What do you think?

selrond avatar Jul 17 '18 14:07 selrond