Witam!
1. Mam pytanie dot. metody Math.floor oraz Math.random.
function randomString(){
var chars = '0123456789abcdefghijklmnopqrstuwxyzABCDEFGHIJKLMNOPQRSTUWXYZ';
var str = '';
var i = 0;
for(i=0; i<10; i++){
str+= chars[Math.floor(Math.random()*chars.length)];
};
return str;
Dlaczego musiałem skorzystać z nawiasów kwadratowych? str+= chars[Math.floor(Math.random()*chars.length)];
Gdy początkowo napisałem kod używając nawiasów okrągłych pojawił się błąd.
2. Jak w jQuery UI ustawić, żeby w momencie przeciąganie kart pojawił się placeholder taki jak jest wystylizowany w CSS?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tablica kanban</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div id="board" class="board">
<h1>Tablica kanban</h1>
<button class="create-column">Dodaj kolumnę</button>
<div class="column-container"></div>
</div>
<script src="https://code.jquery.com/jquery-3.0.0.min.js" integrity="sha256-JmvOoLtYsmqlsWxa7mDSLMwa6dZ9rrIdtrrVYRnDRH0=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js" integrity="sha256-xNjb53/rY+WmG+4L6tTl9m6PpqknWZvRt0rO1SRnJzw=" crossorigin="anonymous"></script>
<script type="text/javascript" src="js/scripts.js"></script>
</body>
</html>
body{
background-color: #ccc;
}
.card-placeholder{
height: 1.5em;
line-height: 1.2em;
background-color: yellow;
}
$(document).ready(function(){
function randomString(){
var chars = '0123456789abcdefghijklmnopqrstuwxyzABCDEFGHIJKLMNOPQRSTUWXYZ';
var str = '';
var i = 0;
for(i=0; i<10; i++){
str+= chars[Math.floor(Math.random()*chars.length)];
};
return str;
};
function Column(name){
var self = this;
this.id = randomString();
this.name = name;
this.$element = createColumn();
function createColumn(){
var $column = $('<div>').addClass('column');
var $columnTitle = $('<h2>').addClass('column-title').text(self.name);
var $columnCardList = $('<ul>').addClass('column-card-list');
var $columnDelete = $('<button>').addClass('btn-delete').text('x');
var $columnAddCard = $('<button>').addClass('add-card').text('Dodaj kartę');
$columnDelete.click(function(){
self.removeColumn();
});
$columnAddCard.click(function(){
self.addCard(new Card(prompt('Wpisz nazwę karty')));
});
$column.append($columnTitle);
$column.append($columnDelete);
$column.append($columnAddCard);
$column.append($columnCardList);
return $column;
};
};
Column.prototype.addCard = function(card) {
this.$element.children('ul').append(card.$element);
};
Column.prototype.removeColumn = function(){
this.$element.remove();
};
function Card(description){
var self = this;
this.id = randomString();
this.description = description;
this.$element = createCard();
function createCard(){
var $card = $('<li>').addClass('card');
var $cardDescription = $('<p>').addClass('card-description').text(self.description);
var $cardDelete = $('<button>').addClass('btn-delete').text('x');
$cardDelete.click(function(){
self.removeCard();
});
$card.append($cardDelete);
$card.append($cardDescription);
return $card;
};
};
Card.prototype.removeCard = function(){
this.$element.remove();
};
var board = {
name: 'Tablica Kanban',
addColumn: function(column){
this.$element.append(column.$element);
initSortable();
},
$element: $('#board .column-container')
};
function initSortable(){
$('.column-card-list').sortable({
connectWith: '.column-card-list',
placeholder: '.card-placeholder',
forcePlaceholderSize: true,
}).disableSelection();
};
$('.create-column').click(function(){
var name = prompt('Wpisz nazwę kolumny');
var column = new Column(name);
board.addColumn(column);
});
});
