Integrating SwiperJS with React DnD for a Scheduling Tool

[Tevvek]

Hello!

I am working on a scheduling tool that utilizes SwiperJS for displaying schedules across multiple staff members. Each staff member's schedule is represented by a vertical Swiper instance, containing around 50 slides to represent different time slots. Here's a brief overview of the setup:

• Multiple Vertical Swipers: Each vertical swiper represents a staff member's schedule for the day, with each slide within a swiper representing a specific time slot.
• Drag-and-Drop Functionality: I aim to introduce drag-and-drop functionality using React DnD, allowing users to drag an appointment from one time slot to another within the same swiper or across swipers (to another staff member's schedule).

The Challenge:

I've encountered challenges integrating SwiperJS's swipe actions with React DnD's drag-and-drop, specifically:

• Event Handling Conflict: There seems to be a conflict between SwiperJS's handling of drag/swipe actions and React DnD's drag operations. This makes it difficult to initiate a drag on an appointment without interfering with the swiper's native swipe functionality.
• Drag Across Swipers: Enabling an appointment to be dragged from one swiper to another (i.e., from one staff member's schedule to another's) adds another layer of complexity, given the need to coordinate the drag state across separate Swiper instances.

Questions:

• Has anyone successfully integrated SwiperJS with React DnD for similar use cases, and what strategies did you employ to manage event handling conflicts between swiping and dragging actions?
• Are there recommended approaches or best practices for enabling drag-and-drop actions across multiple Swiper instances without compromising the usability and performance of either library?
• Any insights or examples of managing complex interactions like dragging an item out of a swiper, into another swiper, especially in a context where both libraries are heavily utilized?

Attempts:

• I've tried implementing a long-press mechanism to differentiate between drag and swipe actions, but this partially solves the problem and might not be the most intuitive solution for end-users.
• Looking into SwiperJS's API and documentation for methods or events that could help manage or temporarily disable swipe actions during a drag operation, but I haven't found a clear path forward.

Code Snippet:

// Simplified example of the current setup
<Swiper direction="vertical">
  {timeSlots.map(timeSlot => (
    <SwiperSlide key={timeSlot}>
      {/* Content representing the appointment, which needs to be draggable */}
    </SwiperSlide>
  ))}
</Swiper>

Any advice, suggestions, or references to relevant documentation/examples would be greatly appreciated. Thank you in advance for your time and assistance!

[Crede322]

did you solve this problem?

[ivanjeremic]

I have the same problem for past 6 years and I didn't manage to solve ti.