jQuery draggable & droppable

[Verwijderd]

Beste,

Ik ben weer eens aan de slag gegaan met jQuery drag & drop voor een klasgenoot van me.
Dit heb ik gecombineerd met PHP (voor minder regels code) en dit heb ik er van gemaakt:

http://rapifia.nl/foot/index.php
(het is Feyenoord idd, ben zelf voor Ajax maar hij dus voor Feyenoord )

Nu is het probleem, dat als je een object erop plaatst krijg je netjes de melding, het element word ook gedisabled.
Echter als je nu de "speler" er uit haalt en ergens heen sleept, blijft hij op disabled, terwijl hij dan weer enabled moet worden..

Deze code geef jQuery zelf aan die daarvoor moet werken:

code:

out: function(event, ui) {
                $(this).droppable({ disabled: false });
            },

Hij staat erin maar werkt dus niet..

Wat heb ik verkeerd gedaan?

Alvast bedankt!

[CH4OS]

Naast je huidige probleem:

Hou je er rekening mee dat er ook andere mogelijkheden zijn voor opstellingen, zoals 4-4-3, 3-4-4 en bijvoorbeeld 4-3-4?

[Verwijderd]

@hierboven,
Ja, uiteraard
Dit is alleen een eerste opzet, en ik wil eerst één probleem weghebben voor ik aan de andere feature begin.

[Tharulerz]

CptChaos schreef op dinsdag 01 februari 2011 @ 18:00:
Naast je huidige probleem:

Hou je er rekening mee dat er ook andere mogelijkheden zijn voor opstellingen, zoals 4-4-3, 3-4-4 en bijvoorbeeld 4-3-4?

Wat is dat nou voor een opmerking?

Als iemand een post zou maken dat hij een textvariabele niet kan wegschrijven, en in zijn uitgeklede demo staat enkel een string met alfabetische karakters in, ga je hem er dan ook op wijzen dat een textvariabele ook cijfers en andere tekens kan bevatten?

Probeer toch gewoon op de vraag te beantwoorden...

Edit: @TS:

Je kan in ieder geval deze lap tekst:

JavaScript:

( "#101" ).draggable({
            snap: ".ui-widget-header", 
            snapMode: "inner", 
            snapTolerance: 5, 
            drag: function( event, ui ) {
                $( "#done" ).css({ display: 'none' });
            }
        });
                $( "#102" ).draggable({
            snap: ".ui-widget-header", 
            snapMode: "inner", 
            snapTolerance: 5, 
            drag: function( event, ui ) {
                $( "#done" ).css({ display: 'none' });
            }
        });
                $( "#103" ).draggable({
            snap: ".ui-widget-header", 
            snapMode: "inner", 
            snapTolerance: 5, 
            drag: function( event, ui ) {
                $( "#done" ).css({ display: 'none' });
            }
        });

(enz enz)

Vervangen door bijv elke span van je spelers een klasse .speler mee te geven, en dan kan je gewoon dit doen:

JavaScript:

$( ".speler" ).draggable({
            snap: ".ui-widget-header", 
            snapMode: "inner", 
            snapTolerance: 5, 
            drag: function( event, ui ) {
                $( "#done" ).css({ display: 'none' });
            }

en hetzelfde geldt uiteraard voor je droppables.

Doe dat al eens, dan wordt je code al veel leesbaarder...

[ Voor 47% gewijzigd door Tharulerz op 01-02-2011 18:16 ]

[Verwijderd]

@Hierboven,

Hmm, dat word lastig.
Ik haal namelijk alle spelers uit de MySQL database en met een PHP while loop word dat automatisch aangemaakt

[Tharulerz]

Wat is er dan lastig aan? Je haalt alle spelers uit je database, en geeft elke span ipv een id ook een class mee (allemaal dezelfde class, namelijk 'speler').

Vervolgens kan je die hele lap javascript die je dan ook genereert met PHP wegdoen, en er gewoon 7 regels van maken, namelijk diegene die ik gepost heb. Die .speler selector zorgt ervoor dat alle elementen met als class .speler dan draggable worden...

[Verwijderd]

Heb het toegepast maar het werkt dus niet...

[Manuel]

Verwijderd schreef op dinsdag 01 februari 2011 @ 18:26:
Heb het toegepast maar het werkt dus niet...

Wat werkt er niet, graag eens wat meer informatie, hier kan niemand wat mee.

[Verwijderd]

Laat maar, Tharulerz was een haakje vergeten
Maar nu s.v.p. back ontopic
Wel bedankt voor de info, maar het ging me om iets anders. (zie first message)

[Tharulerz]

Zucht... Dit lijkt meer en meer op een 'fix mijn probleem voor mij'. Misschien moet je eens leren debuggen.

Overigens heb je nu je draggable selector gehangen aan de class '.ui-widget-content', wat niet echt de bedoeling was (daar dat een class is die jquery zelf toevoegt).

En zoals ik zei op het einde van men eerste post, kan je hetzelfde doen voor die droppables (1 class toevoegen en daar een selector aan hangen), zodat je weer eens 120 nutteloze lijnen code kan wegsmijten.

Als je dat nu al eens doet, dan wil ik gerust kijken naar je fout, ook al doe je er zelf niet veel moeite voor.

[Verwijderd]

Oké, ik heb alles netter gemaakt
Ik heb er zelf al heel wat tijd in gestoken, en ik geeft toe, jQuery of JavaScript is niet mijn sterkste vak, ik ben beter in PHP.

Tharulerz heel erg bedankt voor wat je al gedaan hebt

[Klaasvaak]

Als je die dropbox disabled wordt de volledige functionaliteit uitgezet, en wordt de 'out' functie ook niet meer aangeroepen.

Onderstaande kan ik als oplossing verzinnen.
[script=js]
//$(this).droppable({enabled: true})
$(this).droppable('option', 'accept', '*')

//$(this).droppable({disabled: true})
$(this).droppable('option', 'accept', '#'+$(ui.draggable).attr("id"))
[/script]

[Verwijderd]

Ik heb even wat anders probeert.
Dit heb ik gedaan d.m.v. coordinaten.
Dit is de drop functie in droppable

code:

drop: function( event, ui ) {
                if($(ui.draggable).offset().left == $("#101").draggable.offset().left && $(ui.draggable).offset().top == $("#101".draggable).offset().top){
                    $( "#done" ).html("<p><span class='ui-icon ui-icon-info' style='float: left; margin-right: .3em;'></span><font face='Trebuchet MS'>Fout, twee elementenraken elkaar.</font></p>");
                    $( "#done" ).css({ display: 'block' });
                } else{
                    $( "#done" ).html("<p><span class='ui-icon ui-icon-info' style='float: left; margin-right: .3em;'></span><font face='Trebuchet MS'>Speler <b>"+speler[$(ui.draggable).attr("id")-100]+"</b> is succesvol op positie <b>"+positie[$(this).attr("id")]+"</b> geplaatst.</font></p>");
                    $( "#done" ).css({ display: 'block' });
                    if($(this).attr("id") == 12){
                        var pos = 0;
                    } else{
                        var pos = $(this).attr("id");
                    }
                    $.post("verwerk.php", { speler: $(ui.draggable).attr("id"), positie: pos } );
                }
            }

Maar op de één of andere manier kan ik als ik een speler naar een droppable verplaats en deze vervolgens weer verder wil bewegen geen beweging uitvoeren..
En dit is nu voor één element, maar eigenlijk wil ik dus zegmaar die check van #101 ook nog voor #102, #103 t/m #130 maken.
Is er een manier zo'n check sneller te doen dan met een for loop();?

Alvast bedankt!

[Verwijderd]

@klaasvaak,
Heel erg bedankt
Echter werkt het helaas nog niet..
Zou je nog even naar mijn post laatste post willen kijken
Als het volgende mogelijk is zou het super zijn:
1) Speler word verplaatst naar veld
2) Een andere speler kan er niet meer op geplaatst worden (op die droppable) indien dat wel het geval is krijg je een error en word die andere speler weer op de start positie gebracht.
3) Indien de speler die er als eerst op stond eraf word gehaald (dus bijv. naar een andere droppable of gewoon ergens anders op de pagina) dan word alleen die droppable weer vrijgegeven en kan daar dus weer een andere speler op komen.

[Tharulerz]

Je gaat nu 30 spelers vergelijken met 1 veld, telkens er iets op dat veld gedropped wordt. Wat bij 80 spelers? Wat bij 500 spelers?

Als je die manier wil toepassen, waarom gebruik je dan gewoon geen array die even lang is als je velden hebt, en hou je in die array met een boolean bij of het veld ingenomen is of niet? Als er dan een speler op een veld gedropped word, zoek je dat veld op in de array en kijk je of het al bezet is.

Als er een speler afgehaald wordt van dat veld, maak je het veld terug vrij in de array.

Waarom altijd moeilijke oplossingen zoeken die niet scalen?

[Verwijderd]

@Tharulerz,
In ieder geval bedankt voor je idee.
Heb het geprobeerd, maar het is helaas niet gelukt .
Kan je me vertellen wat ik verkeerd doe?

[Manuel]

Verwijderd schreef op woensdag 02 februari 2011 @ 19:53:
@Tharulerz,
In ieder geval bedankt voor je idee.
Heb het geprobeerd, maar het is helaas niet gelukt .
Kan je me vertellen wat ik verkeerd doe?

En nu doe je het weer.

Manuel schreef op dinsdag 01 februari 2011 @ 18:28:
[...]

Wat werkt er niet, graag eens wat meer informatie, hier kan niemand wat mee.

Kan je niet even wat voorbeelden geven wat er nou precies niet lukt?

[Verwijderd]

Zal het uitvoerig beschrijven.
1) Als ik een speler naar zo'n hokje sleep word hij erin gezet.
2) Als ik een andere speler pak en die naar dat hokje neem dan word hij er NOG STEEDS in gezet, wat niet de bedoeling is.

Hoe kan je tevens zo'n draggable dan laten terugkeren naar z'n startpositie? Is me nl. ook nog nooit gelukt.

B.v.d.

[jw_moonshine]

Wat heb je precies gedaan? hoe heb je de array gemaakt? met welke functie laat je de waarde van true naar false veranderen?

dat is informatie die we kunnen gebruiken om je te helpen...

EDIT:

kheb toch meer ff gekeken, en ik zie al heel snel een (waarschijnlijke) fout die het probleem kan veroorzaken:

JavaScript:

if(status[$(this).attr("id")] == false || $(this).attr("id") == 12){

bedenk zelf maar eens wat daar fout aan is...

EDIT:

Om je een zet in de goede richting te geven kwa de beginpositie; je zult dan ook de begincoordinaten in een array moeten zetten, netzoals de namen?

[ Voor 56% gewijzigd door jw_moonshine op 02-02-2011 22:47 ]

[MueR]

Ik wil meer inzet zien larsisgoed9. We zijn hier niet om je script voor je te schrijven. Lees Programming FAQ - Debuggen: hoe doe ik dat? eens door. Meld wat er niet werkt, wat je probeert (in code) en meer van dat spul uit de Quickstart.

Indien het op deze manier door gaat, gooi ik er een slot op.

[Klaasvaak]

Terugkeren bij een ongeldige drop is ingebouwde functionaliteit.
http://jqueryui.com/demos/draggable/#option-revert

Dit heeft echter het probleem dat wanneer een speler vanuit een droppable in het veld wordt gedropped, deze naar zijn droppable terugkeert.
Dit kan worden opgelost door zoals je al gedaan hebt, van de 'bank' een droppable te maken.
Dan moet je enkel nog voorkomen dat de bank na een drop geen andere spelers meer accepteert doordat de 'accept' op de 'id' van de gedropte speler wordt gezet.

[Verwijderd]

Sorry dat het leek alsof ik niks heb gedaan .
Het is me nu bijna gelukt:
http://rapifia.nl/foot/
Ik zou alleen graag nog iets van een melding willen weergeven als 2 draggable's elkaar raken (zo'n warningboxje zegmaar).
Hoe maak ik dat?

Verder nogmaals iedereen heel erg bedankt!!

[Manuel]

Je hoeft alleen maar curplayers te controleren of er al iemand op die posititie staat, zo ja geef die popup. Waarom begin je trouwens in je array vanaf 1? 0 is bij jou altijd een lege string ("").Variabelen: speler, positie, status en curplayers.

[Verwijderd]

Omdat de 0 eigenlijk geen waarde is (vind ik).
Ik werk altijd zonder 0, weet niet waarom maar ik vind het zo overzichtelijker.

Oja, tevens kan dat wat jij zegt niet, omdat als er een speler op staat hij alleen die speler accepteert.
Dit is namelijk dat als je een andere speler erop plaatst, dan krijg je een waarschuwing, maar haal je die speler er dan weer af en zet je hem er dan weer op dan werkt het weer. (omdat de out even word aangeroepen, aangezien jQuery het ziet alsof die 2e speler er eerst op zat).

Hoe zou ik dit dan anders kunnen doen?

[Tharulerz]

Verwijderd schreef op donderdag 03 februari 2011 @ 15:25:
Omdat de 0 eigenlijk geen waarde is (vind ik).
Ik werk altijd zonder 0, weet niet waarom maar ik vind het zo overzichtelijker.

Nog een gewoonte die je best afleert. Alle hogere programmeertalen, maar ook low level talen hebben bijna altijd zero based indexing op arrays.

Ik kan niet direct een artikel vinden waarom het zo is en waarom het beter is, maar laat me stellen dat je er voorlopig misschien nog mee weg komt als je alleen werkt (ook al ga je nu al op problemen stuiten als je code op internet vindt/gebruikt), maar dat je zeker in de problemen gaat komen als je ooit in teamverband zal moeten samenwerken...

[Verwijderd]

Ok, naja ik zal wel kijken maar het is niet het directe probleem van de vraag.
Iig bedankt voor je reply.

Manuel jij trouwens ook nog bedankt voor je reply(s).

[Manuel]

Verwijderd schreef op donderdag 03 februari 2011 @ 15:25:
Oja, tevens kan dat wat jij zegt niet, omdat als er een speler op staat hij alleen die speler accepteert.
Dit is namelijk dat als je een andere speler erop plaatst, dan krijg je een waarschuwing, maar haal je die speler er dan weer af en zet je hem er dan weer op dan werkt het weer. (omdat de out even word aangeroepen, aangezien jQuery het ziet alsof die 2e speler er eerst op zat).

Hoe zou ik dit dan anders kunnen doen?

Ik zal kijken of ik iets voor je in elkaar kan draaien om aan te tonen wat ik precies bedoel, hopelijk wordt het dan iets duidelijker.

Verwijderd schreef op donderdag 03 februari 2011 @ 17:17:
Manuel jij trouwens ook nog bedankt voor je reply(s).

Geen probleem.

[Verwijderd]

Hij werkt jammer genoeg niet meer..
Dit is de nieuwe link:
http://ovm.rapifia.nl

Probleem:
Als je een speler op een vierkant plaatst die leeg is gaat het met succes. Echter als er iemand al erop staat, die je er dan afhaalt en vervolgens de andere speler erop wil zetten dan lukt het niet. Je krijgt dan helemaal geen melding..

Ik hoop dat iemand het weet

Lars

[MueR]

Ik ben er eigenlijk klaar mee. Ik zie nog altijd geen verbetering in je manier van posten. Je blijft gewoon melden dat iets niet werkt, maar ik zie eigenlijk niets meer dan dat. Ik had gehoopt dat je zou inzien dat jij de code moet schrijven, maar blijkbaar niet. Dit topic gaat dicht, het is me steeds meer Kan iemand even .. ?