Jquery Sürükle Bırak Sıralama ( Drag And Drop )
17 Ekim 2022 / 16:57
Burak
Merhabalar,
jquery ile sürükle bırak yani drag and drop ile sıralama yapmak isterseniz aşağıdaki adımları izleyerek yapabilirsiniz.
Kütüphaneler
|
1 2 3 |
<script src="js/jquery.js"></script> <script src="js/jquery-sortable.js"></script> <script src="js/jquery-ui.js"></script> |
Html
|
1 2 3 4 5 6 |
<div id="slider"> <li id="listele_1/1">Anasayfa</li> <li id="listele_31/2">Hakkımızda</li> <li id="listele_354/3">Ürünlerimi</li> <li id="listele_465/4">İletişim</li> </div> |
Javascript
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<script type="text/javascript"> $(document).ready(function () { $("#slider").sortable({ revert: 'true', opacity: '0.8', placeholder: 'ui-state-highlight', update: function () { var order = $(this).sortable('serialize'); $.post("/yonet/konum_kaydet.aspx?i=slider", order, function (cevap) { }); } }); }); </script> |
Css
|
1 2 3 4 |
<style type="text/css"> #slider li{ cursor:move; list-style-type: none; border:solid #CCC 1px; height: 40px; } #slider li:hover{ background:#FFF; } </style> |
Herşeyi tam olarak yaptığınızda html tarafı aşağıdaki gibi gözükücektir.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> </head> <body> <form id="form1" runat="server"> <div> <!-- Jquery Sortable Path. --> <script src="js/jquery.js"></script> <script src="js/jquery-sortable.js"></script> <script src="js/jquery-ui.js"></script> <!-- Jquery Sortable Path End. --> <div id="slider"> <li id="listele_1/1">Anasayfa</li> <li id="listele_31/2">Hakkımızda</li> <li id="listele_354/3">Ürünlerimi</li> <li id="listele_465/4">İletişim</li> </div> <style type="text/css"> #slider li{ cursor:move; list-style-type: none; border:solid #CCC 1px; height: 40px; } #slider li:hover{ background:#FFF; } </style> <script type="text/javascript"> $(document).ready(function () { $("#slider").sortable({ revert: 'true', opacity: '0.8', placeholder: 'ui-state-highlight', update: function () { var order = $(this).sortable('serialize'); $.post("/yonet/konum_kaydet.aspx?i=slider", order, function (cevap) { }); } }); }); </script> </div> </form> </body> </html> |
Hepsi bu kadar javascript kütüphanelerini buradan indirebilirsiniz
Bu Yazılarıda Okuyabilirsiniz...
Bir cevap yazın