Applying Mouse Drop and Drag, and Touch swipe ona slider

Previous discussions:

The outcome of the discussion:
@paulOB created this slider →


I have utilized the above in a very simple slider and wanted to use that to apply Mouse events and Touch events.

Here is the complete code pen with the successful execution →

Scope of Improvement::
When a mouse drop occurs on an anchor tag and the threshold is set to 20 is reached even then, unless a mouseup event takes place, the drag will not occur.

This GIF is explaining the issue, but I do not have the wisdom to take it further and understand the cause and fix it.


Please help me with further improvements. Thanks.

I’m not sure what you are asking for there exactly :slight_smile:

You have set a threshold of 20 and the drag does not occur under that threshold as far as I can see. 20 is a very small overlap so most drags will be more than that even accidentally.

Or is the issue something to do with text highlighting rather than dragging. It seems if its highlighted it stays highlighted and moves when you click somewhere else but I couldn’t narrow the behaviour down.

The dragging seems to work as far as I can tell apart from the text highlight issue above.

You do have a bigger logic error though in that your slider shows nothing on screen resize from small to big. If you have a small window and scroll to item 10 or 12 and then open the screen you get a blank screen.

In my demo I did a matchchmedia function to reset the slider when a media query breakpoint was breached. Otherwise you had have to set up window resize routine instead which would impact the slider quite badly.

1 Like

In every slide box there is an anchor tag →

When the mouse is dropped on the anchor tag and dragged unless the mouse is released the swipe doesn’t happen. But such behavior is not there when the anchor tag is untouched by mouse drop.

I have changed the threshold to 100.

You could try adding the attribute draggable=“false” but it then makes it quite hard to select the text if someone wanted to copy it but it does stop the behaviour you mention.


       <div class="artcur">
            <div class="extracontain">
              <p><a draggable="false" href="">Lorem, ipsum dolor sit amet consectetur adipisicing elit.</a></p>
1 Like

I tried to fix this →

window.addEventListener("resize", () => {
  var pSlider = document.querySelector('.pslider')
  var initial = pSlider.innerHTML
  pSlider.innerHTML = initial = `translateX(${slideVal * 0}%)`

Yet not successful.

Reference →

The attribute can be set conditionally when the mouse is down or touch is active:

  var artcursA = document.querySelectorAll('.artcur a')  
  sliderMT.addEventListener('mousedown', (e) => {
    isDown = true
    startX = e.pageX - sliderMT.offsetLeft
    artcursA.forEach(artcurA => {
      artcurA.setAttribute('draggable', 'false');    

1 Like

This works now →

window.addEventListener("resize", () => {
  var pSlider = document.querySelector('.pslider')
  var initial = pSlider.innerHTML
  pSlider.innerHTML = initial
  document.querySelector(".hslide-wrap").style.transform = `translateX(0%)`

but more work is needed because once it resizes now the HTML doesn’t disappear but still click, drag drop, and touch doesn’t work unless the page is refreshed.

Not sure what you are doing there but I would assume you could just set the slideval to 0 once you have transformed the element. Keep it inside the IFFE.

 ...end of previous code
  window.addEventListener("resize", () => {
    document.querySelector(".hslide-wrap").style.transform = `translateX(0%)`;
    slideVal = 0;


The trouble with the resize event is that it fires a lot and can make the page appear janky which is why I avoided it altogether. You could debounce/throttle it.


I tried this code →

But unless I use this function →

which refreshes the page, the issue remains there otherwise.

You don’t want to reload the page.

The code I gave you works for me. You only need the transform and the slideVal.

Did that not work for you.?

Why are you trying to replace the innerhtml? If you do that you lose all the events attached to them I would think.

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.