|
Napisano: 06 Okt 2014 15:54
Imam jedan problem koji me prosto izluđuje, a pokušavam da ga rešim još od juče - imam dva div-a različitih klasa koji su draggable.
$(document).ready(function() {
$( ".plocica" ).draggable({
stop: function(event, ui) {
$.cookie('plocica.x', $(this).css('left'));
$.cookie('plocica.y', $(this).css('top'));
}
})
if ($.cookie('plocica.x') != null) {
$('.plocica').css('left', $.cookie('plocica.x'));
} else {
$('.plocica').css('left', '80px');
}
if ($.cookie('plocica.y') != null) {
$('.plocica').css('top', $.cookie('plocica.y'));
} else {
$('.plocica').css('top', '150px');
}
$( ".plocica2" ).draggable({
stop: function(event, ui) {
$.cookie('plocica2.x', $(this).css('left'));
$.cookie('plocica2.y', $(this).css('top'));
}
})
if ($.cookie('plocica2.x') != null) {
$('.plocica2').css('left', $.cookie('plocica2.x'));
} else {
$('.plocica2').css('left', '100px');
}
if ($.cookie('plocica2.y') != null) {
$('.plocica2').css('top', $.cookie('plocica2.y'));
} else {
$('.plocica2').css('top', '0px');
}
});
Koristim jQuery Cookie Plugin da sačuvam njihove pozicije preko kolačića.
Evo ga i CSS:
body {
background-color: #bdc3c7;
}
@media only screen and (max-width: 767px){
#strelica {
width: 20px;
height: 20px;
}
}
.plocica, .plocica2 {
width: 80px;
height: 80px;
background-color: #2980b9;
}
@media only screen and (max-width: 767px){
.plocica, .plocica2 {
width: 50px;
height: 50px;
}
}
a u index-u:
<!DOCTYPE html>
<html>
<head>
<!-- Styles -->
<link rel="stylesheet" type="text/css" href="sidr/stylesheets/jquery.sidr.dark.css">
<link rel="stylesheet" type="text/css" href="style.css">
<!-- Lato Font -->
<link href='http://fonts.googleapis.com/css?family=Lato:700' rel='stylesheet' type='text/css'>
<!-- jQuery & jQuery UI -->
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<!-- jQuery Cookie Plugin -->
<script src="skripte/jquery.cookie.js" type="text/javascript">
</script>
<!-- Core -->
<script src="skripte/core.js" type="text/javascript"></script>
</head>
<body>
<script>
$(document).ready(function() {
$('#meni').sidr();
});
</script>
<!-- Sidr JS -->
<script src="sidr/jquery.sidr.min.js"></script>
<a id="meni" href="#sidr"><img id="strelica" src="slike/menu.png" title="Otvori meni"></a>
<div id="sidr">
<center><h1>CHP 2.0</h1></center>
<ul>
<li class="active"><a href="#">Glavna</a></li>
<li><a href="#">O aplikaciji</a></li>
<li><a href="#">Sinhronizacija</a></li>
<li><a href="#">Izlaz</a></li>
</ul>
</div>
<div class="plocica"></div>
<div class="plocica2"></div>
</body>
</html>
I sad kad pomeram prvu pločicu za njom se pomera i druga?! A kad pomeram drugu ona se sama normalno pomera. Međutim , odoh na inspect element sada i vidim ovo:
Zašto se to dešava kada u source odvojeni elementi?
Dopuna: 06 Okt 2014 16:01
Ne provaljujem kako ali sada radi 
|
