Soru & Cevap

Drag Drop alanlarımın yerlerini nasıl cache de tutabilirim ...

10.04.2020 - 11:43

Merhaba arkadaşlar,

ASP.NET MVC5 Projesi geliştiriyorum. 6 tane grafik alanım var drag drop kullanarak konumlarını değiştirebiliyorum. Ama bu değişikliği kullanıcı bazlı hafıza da tutmak istiyorum. Bunu nasıl yapabilirim. Drag drop için jquery ui kullandım.  Kodlarım aşağıdaki şekildedir. 

$(function () {
    $(".sortable").sortable();
    $(".sortable").disableSelection();
});

 

<ul class="sortable">
    <li class="ui-state-default deneme" id="c1">
        <div class="col-lg-12">
            <div class="card m-b-20">
                <div class="card-body">

                    <h4 class="mt-0 header-title">Roated Chart</h4>

                    <ul class="list-inline widget-chart m-t-20 m-b-15 text-center">
                        <li class="list-inline-item">
                            <h5 class="mb-0">86541</h5>
                            <p class="text-muted ">Activated</p>
                        </li>
                        <li class="list-inline-item">
                            <h5 class="mb-0">2541</h5>
                            <p class="text-muted ">Pending</p>
                        </li>
                        <li class="list-inline-item">
                            <h5 class="mb-0">102030</h5>
                            <p class="text-muted ">Deactivated</p>
                        </li>
                    </ul>

                    <div id="roated-chart"></div>
                </div>
            </div>
        </div>
    </li>
    <li class="ui-state-default deneme" id="c2">
        <div class="col-lg-12">
            <div class="card m-b-20">
                <div class="card-body">

                    <h4 class="mt-0 header-title">Combine Chart</h4>

                    <ul class="list-inline widget-chart m-t-20 m-b-15 text-center">
                        <li class="list-inline-item">
                            <h5 class="mb-0">86541</h5>
                            <p class="text-muted ">Activated</p>
                        </li>
                        <li class="list-inline-item">
                            <h5 class="mb-0">2541</h5>
                            <p class="text-muted ">Pending</p>
                        </li>
                        <li class="list-inline-item">
                            <h5 class="mb-0">102030</h5>
                            <p class="text-muted ">Deactivated</p>
                        </li>
                    </ul>

                    <div id="combine-chart"></div>

                </div>
            </div>
        </div>
    </li>
    <li class="ui-state-default deneme" id="c3">
        <div class="col-lg-12">
            <div class="card m-b-20">
                <div class="card-body">

                    <h4 class="mt-0 header-title">Donut Chart</h4>

                    <ul class="list-inline widget-chart m-t-20 m-b-15 text-center">
                        <li class="list-inline-item">
                            <h5 class="mb-0">86541</h5>
                            <p class="text-muted ">Activated</p>
                        </li>
                        <li class="list-inline-item">
                            <h5 class="mb-0">2541</h5>
                            <p class="text-muted ">Pending</p>
                        </li>
                        <li class="list-inline-item">
                            <h5 class="mb-0">102030</h5>
                            <p class="text-muted ">Deactivated</p>
                        </li>
                    </ul>

                    <div id="donut-chart"></div>

                </div>
            </div>
        </div>
    </li>
    <li class="ui-state-default deneme" id="c4">
        <div class="col-lg-12">
            <div class="card m-b-20">
                <div class="card-body">

                    <h4 class="mt-0 header-title">Pie Chart</h4>

                    <ul class="list-inline widget-chart m-t-20 m-b-15 text-center">
                        <li class="list-inline-item">
                            <h5 class="mb-0">86541</h5>
                            <p class="text-muted ">Activated</p>
                        </li>
                        <li class="list-inline-item">
                            <h5 class="mb-0">2541</h5>
                            <p class="text-muted ">Pending</p>
                        </li>
                        <li class="list-inline-item">
                            <h5 class="mb-0">102030</h5>
                            <p class="text-muted ">Deactivated</p>
                        </li>
                    </ul>

                    <div id="pie-chart"></div>

                </div>
            </div>
        </div>
    </li>
    <li class="ui-state-default deneme" id="c5">
        <div class="col-lg-12">
            <div class="card m-b-20">
                <div class="card-body">

                    <h4 class="mt-0 header-title">Bar Chart</h4>

                    <ul class="list-inline widget-chart m-t-20 m-b-15 text-center">
                        <li class="list-inline-item">
                            <h5 class="mb-0">86541</h5>
                            <p class="text-muted ">Activated</p>
                        </li>
                        <li class="list-inline-item">
                            <h5 class="mb-0">2541</h5>
                            <p class="text-muted ">Pending</p>
                        </li>
                        <li class="list-inline-item">
                            <h5 class="mb-0">102030</h5>
                            <p class="text-muted ">Deactivated</p>
                        </li>
                    </ul>

                    <div id="chart"></div>
                </div>
            </div>
        </div>
    </li>
    <li class="ui-state-default deneme" id="c6">
        <div class="col-lg-12">
            <div class="card m-b-20">
                <div class="card-body">

                    <h4 class="mt-0 header-title">Stacked Area Chart</h4>

                    <ul class="list-inline widget-chart m-t-20 m-b-15 text-center">
                        <li class="list-inline-item">
                            <h5 class="mb-0">86541</h5>
                            <p class="text-muted ">Activated</p>
                        </li>
                        <li class="list-inline-item">
                            <h5 class="mb-0">2541</h5>
                            <p class="text-muted ">Pending</p>
                        </li>
                        <li class="list-inline-item">
                            <h5 class="mb-0">102030</h5>
                            <p class="text-muted ">Deactivated</p>
                        </li>
                    </ul>

                    <div id="chart-stacked"></div>

                </div>
            </div>
        </div>
    </li>

</ul>

11 Görüntülenme

1 Cevap

Sitedeki sorulara cevap verebilmek için giriş yapın ya da üye olun.

Profile picture for user f.erenyucal
f.erenyucal
17.02.2023 - 11:10

Merhaba Işık, bunun için onlarca farklı yol var ama tanıdığım yazılımcılar genelde kişinin databasesinde tutar. Buyur

 

$(function() {
  $(".sortable").sortable({
    update: function(event, ui) {

      $.ajax({
        url: "/user/preferences",
        type: "POST",
        data: { chart_order: $(this).sortable("toArray") }
      });
    }
  });
  $(".sortable").disableSelection();
});