Drag & Drop

Grid Drag & Drop

Drog & Drop Me

Drog & Drop Me

Drog & Drop Me

Drog & Drop Me

Drog & Drop Me

Drog & Drop Me

Drog & Drop Me

Drog & Drop Me


<div class="row js-grid cursor-move">
    <div class="col-lg-3 col-sm-6">
        <div class="card bg-body border-0 rounded-3 mb-4 text-center">
            <div class="card-body p-5">
                <h4 class="fs-18 fw-semibold mb-0">Drog & Drop Me</h4>
            </div>
        </div>
    </div>

    <div class="col-lg-3 col-sm-6">
        <div class="card bg-secondary border-0 rounded-3 mb-4 text-center">
            <div class="card-body p-5">
                <h4 class="fs-18 fw-semibold mb-0 text-white">Drog & Drop Me</h4>
            </div>
        </div>
    </div>

    <div class="col-lg-3 col-sm-6">
        <div class="card bg-success border-0 rounded-3 mb-4 text-center">
            <div class="card-body p-5">
                <h4 class="fs-18 fw-semibold mb-0 text-white">Drog & Drop Me</h4>
            </div>
        </div>
    </div>

    <div class="col-lg-3 col-sm-6">
        <div class="card bg-danger border-0 rounded-3 mb-4 text-center">
            <div class="card-body p-5">
                <h4 class="fs-18 fw-semibold mb-0 text-white">Drog & Drop Me</h4>
            </div>
        </div>
    </div>

    <div class="col-lg-3 col-sm-6">
        <div class="card bg-warning border-0 rounded-3 mb-4 text-center">
            <div class="card-body p-5">
                <h4 class="fs-18 fw-semibold mb-0 text-white">Drog & Drop Me</h4>
            </div>
        </div>
    </div>

    <div class="col-lg-3 col-sm-6">
        <div class="card bg-info border-0 rounded-3 mb-4 text-center">
            <div class="card-body p-5">
                <h4 class="fs-18 fw-semibold mb-0 text-white">Drog & Drop Me</h4>
            </div>
        </div>
    </div>

    <div class="col-lg-3 col-sm-6">
        <div class="card bg-light border-0 rounded-3 mb-4 text-center">
            <div class="card-body p-5">
                <h4 class="fs-18 fw-semibold mb-0 text-white">Drog & Drop Me</h4>
            </div>
        </div>
    </div>

    <div class="col-lg-3 col-sm-6">
        <div class="card bg-dark border-0 rounded-3 mb-4 text-center">
            <div class="card-body p-5">
                <h4 class="fs-18 fw-semibold mb-0 text-white">Drog & Drop Me</h4>
            </div>
        </div>
    </div>
</div>

List Drag & Drop

  • Drag & Drop Me
  • Drag & Drop Me
  • Drag & Drop Me
  • Drag & Drop Me
  • Drag & Drop Me
  • Drag & Drop Me
  • Drag & Drop Me
  • Drag & Drop Me
  • Drag & Drop Me 

<ul class="ps-0 mb-0 list-unstyled o-sortable cursor-move">
    <li class="bg-body p-4 rounded-2 mb-3">
        <span class="fs-16 fw-semibold text-dark">Drag & Drop Me</span>
    </li>
    <li class="bg-primary p-4 rounded-2 mb-3">
        <span class="fs-16 fw-semibold text-white">Drag & Drop Me</span>
    </li>
    <li class="bg-secondary p-4 rounded-2 mb-3">
        <span class="fs-16 fw-semibold text-white">Drag & Drop Me</span>
    </li>
    <li class="bg-success p-4 rounded-2 mb-3">
        <span class="fs-16 fw-semibold text-white">Drag & Drop Me</span>
    </li>
    <li class="bg-danger p-4 rounded-2 mb-3">
        <span class="fs-16 fw-semibold text-white">Drag & Drop Me</span>
    </li>
    <li class="bg-warning p-4 rounded-2 mb-3">
        <span class="fs-16 fw-semibold text-white">Drag & Drop Me</span>
    </li>
    <li class="bg-info p-4 rounded-2 mb-3">
        <span class="fs-16 fw-semibold text-white">Drag & Drop Me</span>
    </li>
    <li class="bg-light p-4 rounded-2 mb-3">
        <span class="fs-16 fw-semibold text-white">Drag & Drop Me</span>
    </li>
    <li class="bg-dark p-4 rounded-2 mb-3">
        <span class="fs-16 fw-semibold text-white">Drag & Drop Me</span>
    </li>
</ul>