
	sadet48


	kartlari siralama

JavaScript & jQuery JS Dersleri

Sıralı Kartlar

<!DOCTYPE html>
<html>
<head>
<title>JavaScript & jQuery JS Dersleri</title>
    <meta charset="utf-8">
<style>
@import url('https://fonts.googleapis.com/css?family=Comfortaa');
* {margin: 0;padding: 0}
h1{
font-family: 'Comfortaa',cursive;
color: rgba(0,0,0,.8);
font-size: 1cm;
font-style: italic;
text-indent: 0px;
padding: 10px;
}
#sirala { 
list-style-type: none;
margin: 0; 
padding: 0; 
width: 41%; 
background: #59c;
}
#sirala li {
font-family: 'Comfortaa',cursive;
margin: 3px; 
padding: 0.4em; 
padding-left: .5em;
font-size: .5cm;
width: 250px; 
height: 150px;
display: table;
float: left;
}
#sirala li:hover{cursor: move;}
#sirala li div {
background: yellow;
text-align: center;
display: table-cell;
vertical-align: middle;  
border: 1px solid #ccc;
border-radius: 10px;
}
</style>
</head>
<body>
    <h1 id="b2">Sıralı Kartlar</h1>

<ul id="sirala">
	<li><div>1</div></li>
	<li><div>2</div></li>
	<li><div>3</div></li>
	<li><div>4</div></li>
</ul>

  <script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<script>
$(function() {
    $( "#sirala" ).sortable();
    $( "#sirala" ).disableSelection();
  });
</script>
</body>
</html>

Toplam 109823 ziyaretçi

sadet48

JQuery Cycle ile Haber Bandı

Sadet Sevinç

sadet48.tr.gg@gmail.com

Facebook beğen

Bu web sitesi ücretsiz olarak Bedava-Sitem.com ile oluşturulmuştur. Siz de kendi web sitenizi kurmak ister misiniz?

Ücretsiz kaydol