LWC-Drag and Drop Tile

    Drag and Drop Car Container.

carContainer

<template>

    <lightning-card style="border-block-style: inherit;background-color: white;">

        <header style="background-color: white;"><h1>select a Car</h1>  </header> 

            <div class="row" style="background-color: white;">

                <div class="column1"><c-list></c-list></div>

                <div class="column2"   ><c-car-card></c-car-card></div>

            </div>

    </lightning-card>        

</template>

css

.row{

    width:100%;

}

.column1{

    width:70%;

    float:left;

    background-color:white;

    border:solid    

}

.column2{

    width:30%;

    height:50px;

    float:left

}

list.html

<template>

    <lightning-card title="Car Lists">

        <header class="slds-text-align_center slds-text-heading_small">Drag a car tile</header>

           <lightning-layout multiple-rows horizontal-align="center">

                <template for:each={cars} for:item="car">

                        <lightning-layout-item key={car.Id} padding="around-small" size="12" small-device-size="6"

                            large-device-size="3" medium-device-size="3">

                            <!--  {car.Name}           -->

                            <c-tile car={car} 

                                    key={car.Id}

                                    draggable={tilesAreDraggable}

                                    oncarselect={carSelectHandler}

                                    class="slds-m-around_x-small"

                                     ></c-tile>

             

                        </lightning-layout-item>

                    </template>       

            </lightning-layout>

    </lightning-card>           

</template>

/* eslint-disable no-console */

import { LightningElement,track,wire,api} from 'lwc';

// eslint-disable-next-line no-unused-vars

import{CurrentPageReference} from 'lightning/navigation';

import{fireEvent} from 'c/pubsub';

import {cars} from 'c/data';

export default class List extends LightningElement {

    @wire(CurrentPageReference) pageRef;

    @api tilesAreDraggable = false;

    @track selectedCarId;

    @track cars=cars;

   carSelectHandler(event){

    const carId = event.detail;

    this.selectedCarId = carId;

    console.log(this.selectedCarId);

    fireEvent(this.pageRef,'eventdetails',this.selectedCarId);

    console.log('event fired');

}

displayLabradorDetails(){

    fireEvent(this.pageRef, "eventdetails", "Breed - Labrador");

}

}

CarCard.html

<template>

    <header class="slds-text-align_center slds-text-heading_small">Drop a car tile</header>

        <div class="content">

            <div

            class="drop-zone slds-drop-zone slds-p-around_x-small slds-align_absolute-center"

            ondrop={handleDrop}

            ondragover={handleDragOver}

            >

                <template if:true={areDetailsVisible}> 

                              <img src={carDrag.Picture__c} class="car slds-align_absolute-center" alt="Car Picture" >

                    <div>

                        <p class="title slds-align_absolute-center">

                            {carDrag.SNo}

                            <lightning-badge label={carDrag.carId}></lightning-badge>

                            <lightning-badge label={carDrag.Make__c}></lightning-badge>

                        </p>

                    </div>

                </template>    

            </div>        

        </div>

</template>

carCard.Js

/* eslint-disable no-console */

/* eslint-disable vars-on-top */

/* eslint-disable no-undef */

    

import { LightningElement, api } from 'lwc';

export default class CarCard extends LightningElement {

   

   // @track car;

    @api carDrag;

    areDetailsVisible = false;

  

    handleDrop(event) {

        event.preventDefault();

        this.areDetailsVisible = true;

        // Product__c from LDS

        const car = JSON.parse(event.dataTransfer.getData('car'));

        console.log('car'+car);

        

        this.carDrag=car;

        

    }

    /** Handles for dragging events. */

    handleDragOver(event) {

        event.preventDefault();

    }

}

carCard.css

.drop-zone {

    background: rgb(243, 242, 242);

    display: flex;

    flex-wrap: wrap;

    border-bottom-left-radius: 0.25rem;

    border-bottom-right-radius: 0.25rem;

    height: 400px;

}