mboost-dp1

CSS, Jquery UI og z-index


Gå til bund
Gravatar #1 - rackbox
14. sep. 2013 13:01
Jeg har et lille projekt, hvor der er behov for en opbygning af siden med 3 sektioner. To sektioner er drop-areas og 1 sektion er drag-objekter.

Den store sektion med drag-objekter indeholder 15-20 objekter, der hver kan tildeles nogle egenskaber afhængig af hvor de droppes. Men jeg har også brug for at drag-sektionen kan opdateres med nye drag-objekter MENS man dragger i et objekt. Altså...

Hvis jeg dragger 1 af de 20 objekter op i det drop-area, der indeholder en "menu", så skal hele drag-area'et skifte objekter ud til de, der er relevante i forhold til hvor man dropper dem i menuen.

Det har jeg sådan set også fået til at virke, men der opstår to problemer:

Hvis jeg lægger nye drag-objekter ind i samme div (og altså sletter de gamle), så slettes også det objekt, jeg er i færd med at trække i.

Hvis jeg laver en NY midlertidig div med de nye drag-objekter i, så gør lag-styringen i CSS at jeg ikke kan droppe dem på det nye lag.

Er der nogen, der har en simpel løsning på mit problem, der formentlig kræver mere forklaring fra mig...?
Gravatar #2 - Kolklik
14. sep. 2013 13:56
http://jsfiddle.net/a8CN5/

noget lignende det?
Gravatar #3 - rackbox
14. sep. 2013 14:15
#2 Nej... Forestil dig at der er 2 divs

Div 1:
Drag_1 Drag_2 etc

Div 2:
Drop_1 Drop_2

Når du trækker i Drag_1 og den holdes OVER Drop_2, skal Div 1 opdateres over ajax med nyt indhold SÅ LÆNGE du ikke har sluppet Drag_1. Når Drag_1 slippes skal Div 1 igen indeholde det oprindelige indhold.

Caveat: Drag_1 skal også kunne droppes på Drag_2 og på de nye drag-objects, der dynamisk fyldes ind i Div 1.
Gravatar #4 - Kolklik
14. sep. 2013 14:17
har du et eksempel hvor man kan se det in action da det er lidt svært at følge :) der udover var mit eksempel også mest på at slette de andre objekter i parent (og altså ikke det man dragger)
Gravatar #5 - rackbox
14. sep. 2013 14:24
Har sendt en besked.. Konceptet skal helst ikke ud i offentligheden...

Det er når du trækker op i top-baren, at jeg har behov for at der opdateres med nyt indhold
Gravatar #6 - Kolklik
14. sep. 2013 15:50
Det er helt fint at du ikke vil have det ud :)

Jeg har set kort på det, og det jeg forstår er at du gerne vil:

man dragger en item fra content boksen op på en menu item, for så at skifte over til at vise en div der "tilhøre" det menu punkt, hvorefer man kan smide den item man dragger der ind i, for på den måde at flytte den fra a-b uden at a og b er synlige på samme tid ?.
Gravatar #7 - Kolklik
14. sep. 2013 16:19
http://jsfiddle.net/SPqGY/ noget i stil med det her måske ?

how to:

drag en rød boks op over en grøn:
vent i 0.3 sekunder så skifter view
til det view der passer til den boks du hover over.
nu kan du smide den røde ind der.

drop delen virker ikke så godt pga noget margin og padding osv, men oh well :)
smid oven på en anden rød, giver bedste resultat.
Gravatar #8 - rackbox
14. sep. 2013 16:44
#7 bortset fra at

1. det skal ikke være sortable
2. en rød boks skal kunne droppes på en anden rød boks, der skaber et event, hvorefter den oprindelige div skal vises igen med de oprindelige classmembers i.
3. det er dynamisk, så den div, der vises ved hover, skal hente sit indhold fra en server og altså ikke være preloaded.

Jeg kigger lige på, om det kan justeres til mine behov. Tak for dit forsøg :)
Gravatar #9 - rackbox
14. sep. 2013 16:50
Det ser ud til at der er noget meget specifik kode, der gør brug af sortable, som forhindrer mig i at lave det om til draggable/droppable
Gravatar #10 - Kolklik
14. sep. 2013 16:59
nr 1 er ikke noget problem, dog udfra det du har lavet på den side du linket mig, ville sortable give fin mening umiddelbart ? mere end draggable.

nr 2 dette forstår jeg simpelthen ikke

nr 3 dette er nemt nok, jeg kan godt lave et eksempel hvis du er i tvivl om hvordan dette skal gøres.



Gravatar #11 - rackbox
14. sep. 2013 17:28
#1 Er fordi elementerne ikke skal kunne skifte side. . Hver classmember hører til sin egen klasse og Skal ikke kunne skifte hverken plads eller klasse. Men man skal kunne trække et classmember over på et andet classmember som så opdaterer noget på serven og bagefter flyttes classmember på plads igen.
Gravatar #12 - Kolklik
14. sep. 2013 21:07
ok, nu er jeg mere med på hvad du vil (tror jeg) så det er i stil med dette: http://jsfiddle.net/SPqGY/2/

(der hvor jeg har en alert, vil så være der hvor du ville lave noget server integration)

Hvis dette eksempel ikke er specifikt nok, eller ikke rammer helt det du søger, så tænker jeg at vi måske skulle prøve at kommunikere lidt mere flydende end forum posts(skype,msn,steam-chat,etc), så kan vi hurtigere nå til et resultat som ligner det du efterlyser :)

Gravatar #13 - rackbox
15. sep. 2013 11:10
#12 Det ser meget lovende ud... Tror jeg bare ikke har sat mig ind i helper og appendTo, som ser ud til at fikse det, jeg har bøvlet med...
Gravatar #14 - Kolklik
15. sep. 2013 13:31
Det var godt :)

Hvis du har brug for yderligere hjælp så sig endelig til.
Gå til top

Opret dig som bruger i dag

Det er gratis, og du binder dig ikke til noget.

Når du er oprettet som bruger, får du adgang til en lang række af sidens andre muligheder, såsom at udforme siden efter eget ønske og deltage i diskussionerne.

Opret Bruger Login