Pure CSS code to achieve drag effect

1. Drag effect example
2. CSS Implementation Principle
3. CSS implementation details
4. CSS layout

1. Fixed positioning

5. CSS implements other functions

1. Adsorption function

VI. Explanation and Summary

Use your imagination, CSS can also achieve drag effects.

1. Drag effect example

This is a very common effect on mobile devices. You can press and drag it around, such as the touch screen version of Qidian Chinese website [1] below:

This kind of effect can be easily achieved using JS. It just requires more calculations, more critical scenarios, and more code. However, after some thought, I found that CSS can almost achieve this effect. Let's continue reading.

2. CSS Implementation Principle

In traditional web, page scrolling is a common interaction, which is operated by using the mouse wheel or directly dragging the scroll bar . However, it’s different on mobile devices. You can scroll by simply dragging the page with your finger. Usually a page scrolls either vertically or horizontally, what if it can scroll in both directions? For example

.dragbox{
  width: 300px;
  height: 300px;
  overflow:auto
}
.dragcon{
  width: 500px;
  height: 500px;
}

As long as the width and height of the internal elements are larger than the container, scrolling in both directions can be achieved (remember to set overflow:auto ), as shown below

Normally, the mouse wheel can only scroll in one direction at a time (holding down Shift can scroll in the other direction), but on mobile devices, you can directly drag the content to scroll as shown below

Now, add an element in the middle of the content that scrolls with the content area.

Next, hide the text behind

Does it feel a bit draggy ? The principle is that simple!

3. CSS implementation details

First, determine the size relationship between the drag target and the drag container. Assuming the size of the drag target is w * h , then it is easy to get the size relationship: the internal size is twice the container minus the size of the drag target.

.dragbox{
  width: 100%;
  height: 100%;
}
.dragcon{
  width: calc(200% - w);
  height: calc(200% - h);
}

Use a dynamic image to describe it as follows (the orange block in the middle represents the drag target)

4. CSS layout

Next, we need to add this feature to the page. Here are two layouts:

1. Fixed positioning

Now add the previous layout directly to the page and add fixed positioning

<body>
  ...other elements on the page <div class="dragbox">
    <div class="dragcon"></div>
    <div class="ball"></div> <!--Drag element-->
  </div>
</body>

The key styles are as follows

.dragbox{
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  overflow:auto
}

The hierarchical relationship is as follows

In this way, the dragbox will definitely cover the original part of the page, so you also need to add pointer-events: none; at the same time, add pointer-events: all when dragging

.dragbox{
  /*...*/
  pointer-events: none;
}
.ball{
  /*...*/
  pointer-events: all;
}
.dragbox.active{
  /*...*/
  pointer-events: all;
}

With JS, you can trigger the outer container to scroll when pressed

ball.addEventListener('touchstart',(ev)=>{
   dragbox.classList.add('active');
})
document.addEventListener('touchend',()=>{
   dragbox.classList.remove('active');
})

The actual effect is as follows

The complete code can be accessed at https://codepen.io/xboxyan/pen/PobwxBK (please turn on mobile mode for PC access)

You can also scan the following QR code directly

1. Absolute positioning + hierarchy

Due to the influence of the fixed positioning level, the previous layout has to use JS to dynamically change the state of the container. Is there any way to achieve dragging without affecting the original page ? Let's take a look at this layout, which uses ab s olute positioning

Here you need to wrap a div container around the original page, as follows

<body>
  <div class="dragbox">
    <div class="dragcon"></div>
    <div class="ball"></div>
  </div>
  <div class="body"> <!--Use a single layer to achieve page scrolling-->
    ...other elements on the page</div>
</body>

The key styles are as follows

.dragbox{
  position: absolute;
  width: 100%;
  height: 100%;
  overflow:auto;
}
.body{
  position: relative;
  height: 100%;
  overflow:auto;
}
.ball{
  position: relative;
  z-index: 10; /*Set the drag target's level higher*/
}

Now the hierarchy becomes like this

Here, the original page content is hierarchically between the dragbox and the drag target , so the original page scrolling will not be affected when dragging, and no JS processing is required.

The complete code can be accessed at https://codepen.io/xboxyan/pen/bGBNQxL (please turn on mobile mode for PC access)

You can also scan the following QR code directly

Tip: Of the two layout methods above, the first one is more adaptable and does not affect existing projects; the second one provides a better experience, but will use div as the page scrolling container and make certain changes to the page structure. You can choose according to the actual situation.

5. CSS implements other functions

1. Adsorption function

Often, you need to have it automatically snap to the edge when dragging ends, as shown in the diagram at the beginning of the article. So, what properties can be associated with adsorption?

The answer is CSS Scroll Snap [2]

<body>
  ...other elements on the page <div class="dragbox">
    <div class="dragcon">A</div>
    <div class="dragcon">B</div>
    <div class="ball"></div>
  </div>
</body>

The following are the key styles

.dragbox{
  ...
  scroll-snap-type: x mandatory;
}
.dragcon{
  scroll-snap-align: start;
}

The actual effect is as follows

The complete code can be accessed at https://codepen.io/xboxyan/pen/XWNJyPw (please turn on mobile mode for PC access)

You can also scan the following QR code directly

1. Set the initial position

By default, the drag target is only in the lower right corner. How can we make it in the lower left corner? It's very simple. The dragging here is implemented by the scroll container, so you only need to change scrollLeft or scrollTop.

dragbox.scrollLeft = 999;
dragbox.scrollTop = 999;

In addition, it can also be implemented in pure HTML, using the element's autofocus feature to automatically focus on the visible range.

<div class="dragcon">
  ...
  <button class="pos" autofocus></button> <!--Add an auto-focus element-->
</div>

For example, if you want the initial position to be in the upper left corner , then just add an auto-focus element in the lower right corner (of course, you also need to set transparency to hide it)~

1. Set boundaries

Now the boundary of the drag target is the edge of the screen. Sometimes you may need to leave some spacing. This is easy to do in CSS. You can change left/top/right/bottom , padding , border... many ways

.dragbox{
  left: 10px;
  top: 10px;
  right: 10px;
  bottom: 10px;
  /*rect: 10px;*/
}
.dragbox{
  padding: 10px;
}

VI. Explanation and Summary

I originally thought that there would be no problem with compatibility, but after actual testing, I found that there were many problems with iOS, mainly the problem of Safari scroll container. For example, some lower versions of iOS do not scroll smoothly and need to add

-webkit-overflow-scrolling:touch can achieve smooth scrolling and automatic adsorption, but it will cause hierarchy problems. Some documents describe that setting this property will create a native scroll container with the highest level. There is also the first fixed layout. If pointer-events: none is set by default and set to auto after touchstart , the scrolling will fail on iOS, but it will work if it is reversed (the demo is compatible with iOS).

As for the advantages, it inherits the flexibility of CSS, has almost zero cost, is easy to reuse, and utilizes native scrolling without any lag.

However, there are some limitations. If the size of the drag target is not fixed , you may need to use JS to obtain it. Of course, in comparison, this is still a very cost-effective implementation method.

Looking back now, I didn’t use any very obscure properties (scroll-snap may be one, but it is an auxiliary function after all). The main effects were common. Then, through association and divergence, based on daily accumulation, I fully explored the native capabilities and finally completed the required interaction, which led to this article.

Thank you for reading, I hope it can inspire my future work.

References

[1] Qidian Chinese website: https://m.qidian.com/

[2] CSS Scroll Snap: https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Scroll_Snap

This is the end of this article about the code for implementing drag-and-drop effects with pure CSS. For more relevant content about implementing drag-and-drop effects with CSS, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!

<<: Do you know how to optimize loading web fonts?

>>: Detailed explanation of angular parent-child component communication