Applying Mouse Drop and Drag, and Touch swipe ona slider

[codeispoetry]

Previous discussions:

Intersection Observer API, counter and scope of a variable + Developing a slider

Your solution is definitely worth studying. I will study it tommorow. While I was not logged into the sitepoint.com I tried and modified my code. Here is the new codepen → https://codepen.io/codeispoetry/pen/OJOqjLp I have simplified the JS logic, but problem is in my CSS approach. On next the div’s doesnt appear to be sliding, but as if they are appearing and disappearing. However on prev the sliding animation is there, otherwise the divs are moving as anticipated. Animation in this part n…

Slider Not fully sliding and creating some unslided space upon every slide

The padding and border make it bigger than 100%. Add box-sizing:border:box. .hrecur { flex: 0 0 calc((100%) / var(--slides-across)); transition: transform 0.5s; padding: 7px; display: flex; justify-content: space-between; gap: 15px; align-items: center; background-color: var(--color4); background-clip:content-box; border: 2px solid red; box-sizing:border-box; }

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

https://codepen.io/paulobrien/pen/OJOdaNy

Current:

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 →
https://codepen.io/codeispoetry/full/oNMKOZO

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.

[PaulOB]

@codeispoetry

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.

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

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.

[codeispoetry]

@PaulOB

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

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.

@PaulOB

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.

I have changed the threshold to 100.

[PaulOB]

@codeispoetry

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 dro

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.

e.g.

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

[codeispoetry]

@PaulOB

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.

I tried to fix this →

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

Yet not successful.

Reference →

Pure JS - how to refresh only div, not whole page?

Hello, thank you for your time in advance. I’m doing game. I would like to refresh only mock-up of the game - html element <div id='game'>(not whole page). The div above contains img tags which I want to refresh. I was looking for information, but no one works. If you would like to see the source code go there: Thank you, Megi

[codeispoetry]

@PaulOB

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

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');    
    });
  })

[codeispoetry]

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.

[PaulOB]

@codeispoetry

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;
  });

})(document);

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.

[codeispoetry]

I tried this code →

But unless I use this function →

location: reload() method - Web APIs | MDN

which refreshes the page, the issue remains there otherwise.

[PaulOB]

You don’t want to reload the page.

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

@PaulOB

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

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.