Skip to content

I want to swap images between 2 divs #287

@sagarpadia17

Description

@sagarpadia17
  • [<ReactSortable
  •       list={list}
    
  •       setList={setList}
    
  •       ghostClass="dropArea"
    
  •       filter=".ignore-elements"
    
  •       draggable=".item"
    
  •       handle=".dragHandle"
    
  •       preventOnFilter={true}
    
  •       animation="200"
    
  •       easing="ease-out"
    
  •       swap
    
  •       onEnd={(evt) => handleSwap(evt.oldIndex, evt.newIndex)}
    
  •     >
    
  •       {list.map((key) => (
    
  •         <div key={key.id} className="item">
    
  •           <div className="col-12 py-2 ignore-elements">
    
  •             <div className="col-12">
    
  •               <div className="car-images-canvas-label d-flex align-items-center justify-content-end">
    
  •                 <p className="m-0 pe-3 ">{key.label}</p>
    
  •               </div>
    
  •             </div>
    
  •           </div>
    
  •           <div className="col-12  py-3 px-4 d-flex">
    
  •             <div className="ignore-elements">
    
  •               <img
    
  •                 src={key.demoImg}
    
  •                 className="me-3 "
    
  •                 alt={`${key.demoImg}Icon`}
    
  •                 height={150}
    
  •                 width={150}
    
  •               />
    
  •             </div>
    
  •             <div className="dragHandle">
    
  •               <img
    
  •                 src={key.actualImg}
    
  •                 className="ms-3"
    
  •                 alt={`${key.demoImg}Icon`}
    
  •                 height={150}
    
  •                 width={150}
    
  •               />
    
  •             </div>
    
  •           </div>
    
  •         </div>
    
  •       ))}
    
  •     `</ReactSortable>`]
    
  •     In this i want to add swapping functions to the actualimg but when i am adding item to actual image its not working
    

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions