I need to implement the drag function for the echarts.

HTML CODE:

<div class="maindash">
    <div class="cardchart" id="barchart" ></div>
    <div class="cardchart"  id="piechart" ></div>
    <div class="cardchart"  id="areachart" ></div>
    <div class="cardchart"  id="baranimchart" ></div>
</div>

<style>
    .maindash {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-evenly;
        flex-grow: 0;
        margin: 10px;
        gap: 5px;
        overflow: auto;
        height: 100%;
    }

    .cardchart {
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        margin:13px;
        width: 400px; 
        height: 300px;
        background-color: #fff;
    }
</style>

JS CODE:

function dragndrop() {
                    $( ".cardchart" ).sortable({
                        revert: true
                      });

            }

For some reason I can drag only the chart and not the div. I have selected (.cardchart) but it continues to drag only the chart. Me I want to drag the complete div.