Kacheln ala Win10

[TecEye]

Hy, also seit gestern darf ich einen Win10 Lappi mein Eigene nennen (über das System lässt sich streiten)
allerdings gefällt mir die Funktion die Kacheln im Startmenü zu verschieben und Größen anzupassen.
Meinen kläglichen Versuch mittels CSS und jquery sortable seht ihr hier:
Edit fiddle - JSFiddle
ev hat jemand bock mit mir spaßeshalber dran rumzuwerkeln

mit float geht es nicht, weil er den platz kleinerer spaces nicht mit einer darauffolgenden kleinen kachel füllt bei zeilenumbruch sondern macht ja n break, quasi neue zeile.
ich denk mal flexbox hilft da weiter, werde mich da mal reinfuchsen, bin für Vorschläge immer offen

 

[mikdoe]

ich stelle mich als tester für usability auf touch zur verfügung. bis jetzt kann ich mit touch im fiddle nichts machen.

 

[TecEye]

ich stelle mich als tester für usability auf touch zur verfügung. bis jetzt kann ich mit touch im fiddle nichts machen.

Wie siehts jetzt aus? Edit fiddle - JSFiddle

- - - Aktualisiert - - -

So habe die Kacheln jetzt auf original Windows Kachelgrößen gemacht und angefangen das Submenu einzublenden wenn man hovert (für die Größeneinstellung)
mit click öffnet sich das sub_menu Edit fiddle - JSFiddle
bei mouseout soll sich das menü schließen, tut es auch, aber auch wenn ich mit dem cursor ins menu gehe, obwohl icon_menu doch child von sub ist ?

- - - Aktualisiert - - -

UPDATE: Edit fiddle - JSFiddle

- - - Aktualisiert - - -

Habe im inet was gefunden, aber es verhält sich nicht so ganz wie gewünscht
http://vnjs.net/www/project/freewall/example/draggable.html

- - - Aktualisiert - - -

So wir kommen der Sache schon näher, hab da ein Script gefunden, was fast macht was es soll, obwohl das script an sich wahrscheinlich überdimensioniert ist, muss ich noch säubern.

Aber die Frage ist, wieso wird die Kachel 8 grün nicht so groß angezeigt wie ich sie definiert hatte :/

http://jsfiddle.net/d127zka8/7/

 

[mikdoe]

mit touch verschieben geht jetzt

 

[TecEye]

So ich hab es jetzt fast wie ich es haben will Edit fiddle - JSFiddle
Aber findet jemand warum wenn man n bisschen rumspielt, die großen sich anpassen und klein werden

 

[mikdoe]

ist für touch auch die größenänderung vorgesehen?

 

[TecEye]

nee eher nicht, ist glaub ich zu filigran, außerdem welche technik sollte man da verwenden, doppelklick? was würdest du sagen?

- - - Aktualisiert - - -

wie ist das denn auf einen win10 tablet gelöst? weiß das schon jemand?

 

[mikdoe]

man könnte das mittel längerem touch machen. dann gut sichtbare pfeile die man bewegen kann.

 

[TecEye]

Das wäre ne idee, aber was meinst du mit pfeilen? resize? gibt doch das menü mit 4 größen, das müsste bei längerem drücken dann aufgehen.
Dann darf es doch kein child sein, wenn ich das sub icon bei mobil verberge.
gibt es von jquery einen touchcounter oder muss ich den selbst entwickeln.

Hier mach eh sonst keiner mit, ich glaub ich muss die zwei probleme die hier momentan noch sind mal einzeln posten

- - - Aktualisiert - - -

Bin jetzt soweit dass ich herausgefunden habe wie die kacheln nicht resized werden Edit fiddle - JSFiddle
aber jetzt ist da so ein riesen space zwischen den kacheln, kp wo der herkommt, das developer tool für die elemente hilft mir auch nicht weiter, jemand n plan?

 

[TecEye]

ok Problem gefunden Edit fiddle - JSFiddle
aber ich bekomme kein vernünftiges margin hin :/

- - - Aktualisiert - - -

Wenn man nicht alles selbst macht Edit fiddle - JSFiddle
So hoffentlich kann jetzt wenigstens einer mit dem Submenu helfen

- - - Aktualisiert - - -

Edit fiddle - JSFiddle

 

[TecEye]

wenn ich doch alle z-index:1; mache und beim hovern z-index:2; dann müßte doch der gehoverte über den andern stehen. wieso ist dann das submenü unter den nachfolgenden kacheln begraben?
Edit fiddle - JSFiddle

 

[paul schmitz]

wenn ich doch alle z-index:1; mache und beim hovern z-index:2; dann müßte doch der gehoverte über den andern stehen.

Müsste eigentl. schon. Laut z-index: Überlappung: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets ist "Ein Layer mit der höheren Zahl über dem Layer mit der niedrigeren Zahl."

 

[kkapsner]

Der z-index ist an dem falschen Element. Es muss an dem sub_menu sein: Edit fiddle - JSFiddle

 

[TecEye]

hammer geil, was würde ich nur ohne den kkapsner machen, danke dir