Pagination ,Card , drag and drop c#

 

Drag and drop from :

https://web.dev/drag-and-drop/?gclid=EAIaIQobChMIjomlyLTF9gIVTppmAh2rgAwKEAAYASAAEgIn5fD_BwE

@{

    ViewBag.Title = "Index";

}

<style>

  @*  .container {

        display: grid;

        grid-template-columns: repeat(5, 1fr);

        gap: 10px;

    }*@

    .box {

        @*border: 3px solid #666;

        background-color: #ddd;

        border-radius: .5em;

        padding: 10px;*@

        cursor: move;

    }

</style>

<style>

    *{

      box-sizing: border-box;

    }

    /* Float four columns side by side */

    .column {

      float: left;

      padding: 0 10px;

      margin-bottom: 10px;

    }

    .column:hover {

        transform: scale(1.1);

    }

    /* Remove extra left and right margins, due to padding */

    .row {margin: 0 0;text-align:left}

    /* Clear floats after the columns */

    .row:after {

      content: "";

      display: table;

      clear: both;

    }

    /* Responsive columns */

    media screen and (max-width: 600px) {

      .column {

        width: 100%;

        display: block;

        margin-bottom: 20px;

      }

    }

    /* Style the counter cards */

    .card {

      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);

      padding: 16px;

      text-align: center;

      background-color: #f1f1f1;

      width:200px;

    }

    @*Paginatio Style*@

    .pagination {

        display: inline-block;

        margin-left:30%;

        float:left;

        margin-top:4%;

    }

    .pagination a {

        font-size: 14px;

        color: black;

        float: left;

        padding: 8px 16px;

        text-decoration: none;

        transition: background-color .3s;

        border: 1px solid #ddd;

    }

    .pagination a.active {

        background-color: #072151;

        color: white;

        border: 1px solid #4CAF50;

    }

    .pagination a:hover:not(.active) {

        background-color: #ddd;

    }

</style>

<div class="col-xs-12 no-pad">

    <h2>Monitoring</h2>

</div>

<div class="container">

    <div class="row">

        <div draggable="true" class="box">

            <div class="column">

                <div class="card">

                    <i class="fa fa-pencil" style="margin:0;padding:0;float:right;"></i>

                    <h3>GamerHeaven ID - Indos111a</h3>

                    <p>Portal Limit : 500</p>

                    <p>Affiliate Limit</p>

                    <p>Gorila : 20<p>

                    <p>xparrow : 20<p>

                    <p>mobipism : 500<p>

                </div>

            </div>

        </div>

        <div draggable="true" class="box">

            <div class="column">

                <div class="card">

                    <i class="fa fa-pencil" style="margin:0;padding:0;float:right;"></i>

                    <h3>GamerHeaven ID - Indos11144a</h3>

                    <p>Portal Limit : 500</p>

                    <p>Affiliate Limit</p>

                    <p>Gorila : 20<p>

                    <p>xparrow : 20<p>

                    <p>mobipism : 500<p>

                </div>

            </div>

        </div>

    </div>

</div>

    <div class="container"></div>

    <div class="pagination text-center">

        <a href="#">&laquo;</a>

        <a href="#">1</a>

        <a href="#" class="active">2</a>

        <a href="#">3</a>

        <a href="#">4</a>

        <a href="#">5</a>

        <a href="#">6</a>

        <a href="#">&raquo;</a>

    </div>

    <div class="footer" style="margin-top:200px;"></div>

    <div class="container">

        <div draggable="true" class="box">A</div>

        <div draggable="true" class="box">B</div>

        <div draggable="true" class="box">C</div>

    </div>

    <script type="text/javascript" src="https://code.jquery.com/jquery-1.7.1.min.js"></script>

    <script>

        $(document).ready(function () {

            GetPortalManagement();

        });

        function GetPortalManagement() {

            $.ajax({

                url: '/Monitoring/getportalManagement',

                success: function (response) {

                },

                error: function () { alert("ERROR PAGE") }

            });

        }

    </script>

    <script>

        document.addEventListener('DOMContentLoaded', (event) => {

            var dragSrcEl = null;

            function handleDragStart(e) {

                this.style.opacity = '0.4';

                dragSrcEl = this;

                e.dataTransfer.effectAllowed = 'move';

                e.dataTransfer.setData('text/html', this.innerHTML);

            }

            function handleDragOver(e) {

                if (e.preventDefault) {

                    e.preventDefault();

                }

                e.dataTransfer.dropEffect = 'move';

                return false;

            }

            function handleDragEnter(e) {

                this.classList.add('over');

            }

            function handleDragLeave(e) {

                this.classList.remove('over');

            }

            function handleDrop(e) {

                if (e.stopPropagation) {

                    e.stopPropagation(); // stops the browser from redirecting.

                }

                if (dragSrcEl != this) {

                    dragSrcEl.innerHTML = this.innerHTML;

                    this.innerHTML = e.dataTransfer.getData('text/html');

                }

                return false;

            }

            function handleDragEnd(e) {

                this.style.opacity = '1';

                items.forEach(function (item) {

                    item.classList.remove('over');

                });

            }

            let items = document.querySelectorAll('.container .box');

            items.forEach(function (item) {

                item.addEventListener('dragstart', handleDragStart, false);

                item.addEventListener('dragenter', handleDragEnter, false);

                item.addEventListener('dragover', handleDragOver, false);

                item.addEventListener('dragleave', handleDragLeave, false);

                item.addEventListener('drop', handleDrop, false);

                item.addEventListener('dragend', handleDragEnd, false);

            });

        });

    </script>