Nieuws:

Welkom, Gast. Alsjeblieft inloggen of registreren.
Heb je de activerings-mail niet ontvangen?

Auteur Topic: jquery  (gelezen 2840 keer)

Offline maxpower

  • Lid
jquery
« Gepost op: 2010/10/12, 11:55:52 »
Hallo,

Ik moet voor school met behulp van jquery een fotopuzzel maken. Zo 1 met schuifbare blokjes.. Ik zit een beetje met het verplaatsen van de blokjes. Want die mogen tijdens het schuiven volgens de opdracht de andere blokjes niet raken. Ik zit me af te vragen hoe ik dit aan moet gaan pakken: is er bijvoorbeeld in de dragable een optie die zegt dat ik geen andere images mag raken tijdens het slepen oid? Hoe zouden jullie dit aanpakken? Is er niet 1 of ander kant en klaar voorbeeld van?

Groet,
Mark.

Offline Rachid

  • Lid
    • rachidbm
    • Mijn blog
Re: jquery
« Reactie #1 Gepost op: 2010/10/12, 12:19:52 »
Kant en klaar voorbeeld? Dan valt er nog weinig te leren en uit te voeren ehh :P

Ik zou eens zoeken op Collision Detection (iets met botsing).
http://www.google.nl/search?q=jquery+collision+detection
Ben je ook blij dat Ubuntu zo toegankelijk en gratis is, en wil je graag net als ik iets terugdoen, kijk dan eens rond bij mwanzo, dé poort naar het bijdragen aan Ubuntu en haar gemeenschap!

Offline Ronnie

  • Lid
    • ronnie.vd.c
Re: jquery
« Reactie #2 Gepost op: 2010/10/12, 13:09:07 »
Ik ga het hele script ook niet hier zomaar neerzetten. Maar deze links zouden je een heel eind op weg moeten helpen

http://jqueryui.com/demos/sortable/
http://jqueryui.com/demos/draggable/

HINT: Kijk vooral eens naar het tabblad opties (snapMode, axis etc)
Ben je ook blij dat Ubuntu zo toegankelijk en gratis is, en wil je graag net als ik iets terugdoen, kijk dan eens rond bij mwanzo, dé poort naar het bijdragen aan Ubuntu en haar gemeenschap!

Documentatie Terminal

Offline maxpower

  • Lid
Re: jquery
« Reactie #3 Gepost op: 2010/10/12, 20:14:50 »
Ik ben me bewust van het bestaan van dragable.. ^^ het probleem zit hem meer in het niet weten hoe ik er voor kan zorgen dat ik de blokjes niet over elkaar heen kan slepen zeg maar. want dat mag niet.

edit:
<HTML>

<HEAD>

<script type="text/javascript"

src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript"

src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>

<style>

.movable{

width:150px;height:150px;background-color:pink;border:1px solid #999999;position:absolute;

}



</style>

</HEAD>

<BODY>



   

    <DIV class="movable" style="left:0;top:200"> </DIV>

    <DIV class="movable" style="left:152;top:200"> </DIV>

    <DIV class="movable" style="left:304;top:200"> </DIV>

    </div>

   

<SCRIPT>

$(document).ready(function(){

$(".movable").draggable({collide: 'block'});

});

</SCRIPT>



</BODY>

</HTML>


Dit werkt dus niet? Moet ik die colidable er bij downloaden en zo ja? waar?
« Laatst bewerkt op: 2010/10/12, 20:30:38 door maxpower »

Offline Ronnie

  • Lid
    • ronnie.vd.c
Re: jquery
« Reactie #4 Gepost op: 2010/10/12, 22:07:38 »
Kijk eens bij de opties van draggable:http://jqueryui.com/demos/draggable/#options
collide kan ik er niet tussen vinden.

Bekijk ook eens het voorbeeld contraint-movement
http://jqueryui.com/demos/draggable/#constrain-movement
Ben je ook blij dat Ubuntu zo toegankelijk en gratis is, en wil je graag net als ik iets terugdoen, kijk dan eens rond bij mwanzo, dé poort naar het bijdragen aan Ubuntu en haar gemeenschap!

Documentatie Terminal

Offline bram103

  • Lid
Re: jquery
« Reactie #5 Gepost op: 2010/10/13, 18:35:44 »
Bedoel je zo'n puzzel met 9 vakjes en 8 schuifjes (aantal schuifjes = aantal vakjes - 1)?

Als dat de bedoeling is kun je misschien beter niet met drag en drop werken maar gewoon met een klick of dubbelklick event. Want het is dan zo dat alleen de schuifjes die aan de lege plaats grenzen naar de lege plaats geschoven kunnen worden. 

Offline maxpower

  • Lid
Re: jquery
« Reactie #6 Gepost op: 2010/10/13, 23:09:31 »
Bedoel je zo'n puzzel met 9 vakjes en 8 schuifjes (aantal schuifjes = aantal vakjes - 1)?

Als dat de bedoeling is kun je misschien beter niet met drag en drop werken maar gewoon met een klick of dubbelklick event. Want het is dan zo dat alleen de schuifjes die aan de lege plaats grenzen naar de lege plaats geschoven kunnen worden. 

School zou school niet ziijn als er niet expliciet in de uitleg beschreven staat dat het met drag drop moet en dat je de dingen ook absoluut niet over elkaar heen mag schuiven.

Offline akjssdk

  • Lid
Re: jquery
« Reactie #7 Gepost op: 2010/10/14, 09:15:32 »
http://jqueryui.com/demos/sortable/#display-grid
Heb je daar mss iets aan? Of moeten die blokjes echt wegspringen op het moment dat het ene blokje het andere blokje raakt? (zonder overlap zeg maar)

(in dat geval: http://jqueryui.com/demos/sortable/#option-tolerance)

Offline bram103

  • Lid
Re: jquery
« Reactie #8 Gepost op: 2010/10/14, 19:38:09 »
Citaat
School zou school niet ziijn als er niet expliciet in de uitleg beschreven staat dat het met drag drop moet en dat je de dingen ook absoluut niet over elkaar heen mag schuiven

Ok, opdracht is wat dat betreft dus duidelijk.

Citaat
is er bijvoorbeeld in de dragable een optie die zegt dat ik geen andere images mag raken tijdens het slepen oid?

Niet onmogelijk dat een dergelijke optie bestaat maar ik ben hem nog niet tegen gekomen. Het lijkt me wel de goede oplossingsrichting maar ik denk dat je hem zelf moet maken. Je zult tijdens het slepen de verplaatsing van het puzzelstukje continue moeten volgen en berekenen of een botsing dreigt. Je kunt de verplaatsing van de cursor door de gebruiker niet beinvloeden maar je kunt op deze mannier het puzzelstuk niet exact de verplaatsing van de cursor laten volgen zodat een botsing vermeden wordt.

Als het trouwens zo'n puzzel is als ik in mijn eerste reactie beschreef dan kan een puzzelstukje maar in 1 richtijng schuiven, je zou dan een eigen drag drop kunnen maken die het puzzelstukje alleen de cursorverplaatsing van de gebruiker die in de goede richting gaat laat volgen en op tijd stopt om niet te botsen.    

Offline Rachid

  • Lid
    • rachidbm
    • Mijn blog
Re: jquery
« Reactie #9 Gepost op: 2010/10/14, 20:04:23 »
Volgens mij had Ronnie bijna een werkend voorbeeld gegeven.
Bekijk ook eens het voorbeeld contraint-movement
http://jqueryui.com/demos/draggable/#constrain-movement
Jammer dat hier niet op gereageerd wordt.
Ben je ook blij dat Ubuntu zo toegankelijk en gratis is, en wil je graag net als ik iets terugdoen, kijk dan eens rond bij mwanzo, dé poort naar het bijdragen aan Ubuntu en haar gemeenschap!

Offline bram103

  • Lid
Re: jquery
« Reactie #10 Gepost op: 2010/10/15, 19:28:32 »
Citaat
Jammer dat hier niet op gereageerd wordt.
Je hebt gelijk. Dit ...

Citaat
Als het trouwens zo'n puzzel is als ik in mijn eerste reactie beschreef dan kan een puzzelstukje maar in 1 richtijng schuiven, je zou dan een eigen drag drop kunnen maken die het puzzelstukje alleen de cursorverplaatsing van de gebruiker die in de goede richting gaat laat volgen en op tijd stopt om niet te botsen.
... bijvoorbeeld is daarin al opgelost.

Het is te hopen dat de betreffende leeraar niet meekijkt want dat gaat misschien wel punten kosten ;)