Hallo Folks, ik ben nu al een tijd in gevecht met Opera en jQuery UI's Sortable functie.
Ik gebruik het om portfolio items te kunnen sorteren, deze thumbnails hebben rechtsonder een anchor waarmee gesleept kan worden. Via ajax wordt de informatie weer naar de server geduwd en zo wordt het opgeslagen.
Dit werkt allemaal als een tierelier, alleen doet Opera 9.51 (mischien andere versies ook).
Ik heb getest in Firefox en Safari, waarin het prima werkt, Opera doet alleen vervelend.
Als ik daar drag en drop, dan springt het een regel naar onderen lijkt het wel.
Hier bijbehorend CSS:
En het javascript wat er bij hoort om te sorteren.
Om zelf rond te kijken mag je hier klikken.
Hier een screenshot van hoe het fout gaat:

---
O ja, graag geen items gaan verwijderen ofzo, zodat anderen ook gewoon kunnen testen.
Ik gebruik het om portfolio items te kunnen sorteren, deze thumbnails hebben rechtsonder een anchor waarmee gesleept kan worden. Via ajax wordt de informatie weer naar de server geduwd en zo wordt het opgeslagen.
Dit werkt allemaal als een tierelier, alleen doet Opera 9.51 (mischien andere versies ook).
Ik heb getest in Firefox en Safari, waarin het prima werkt, Opera doet alleen vervelend.
Als ik daar drag en drop, dan springt het een regel naar onderen lijkt het wel.
Hier bijbehorend CSS:
code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| #portfolio li {
position: relative;
}
#portfolio li, #portfolio li a {
display:inline;
float:left;
height:54px;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0;
overflow:hidden;
padding:0;
}
#portfolio .portHandle {
bottom:7px;
position:absolute;
right:3px;
z-index:1;
} |
En het javascript wat er bij hoort om te sorteren.
code:
1
2
3
4
5
6
7
8
9
10
11
12
13
| //Make sortable
jQuery("#portfolio ul").sortable({ //Make sortable
handle: ".portHandle",
update: function() {
jQuery.ajax({
type: "POST",
url: "ajax/portfolio.php",
data: "action=sort&" + jQuery(this).sortable("serialize")
});
}
});
jQuery("#portfolio .images a").append('<img class="portHandle" src="images/anchor.png" alt="verplaatsen" style="position: absolute; bottom: 7px; right: 3px; z-index: 1;" />'); |
Om zelf rond te kijken mag je hier klikken.
Hier een screenshot van hoe het fout gaat:

---
O ja, graag geen items gaan verwijderen ofzo, zodat anderen ook gewoon kunnen testen.
[ Voor 11% gewijzigd door ZpAz op 21-09-2008 20:30 ]
Claude: "Domain patterns emerge from iteration, not generation." - Tweakers Time Machine Extension | Chrome : FF