Drag & Drop systeem

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Ventilatiesysteem Productontwikkelaar HBO WO Verwa

Samengevat: Zij bieden flexibele ventilatiematerialen, geluidsdempers, rookgasafvoer producten en industrieslangen. Ben jij een technisch productontwikkelaar? Heb jij ervaring met het ontwikkelen van nieuwe producten? Vaste baan: Technisch Productontwikkelaar HBO WO €3.000 - €4.000 Zij bieden een variëteit aan flexibele ventilatiematerialen, geluiddempers, rookgasafvoer producten, industrieslangen en ventilatieslangen voor de scheepsbouw. Met slimme en innovatieve materialen zorgen wij voor een gezonde en frisse leefomgeving. Deze werkgever is een organisatie die volop in ontwikkeling is met hardwerkende collega's. Dit geeft goede ontwikkelingsmogelijkheden. De branche van dit bedrijf is Techniek en Engineering. Functie: Voor de vacature als Technisch Productontwikkelaar Ede Gld HBO WO ga

Bekijk vacature »

Brecht S

Brecht S

08/12/2014 09:34:00
Quote Anchor link
Ik probeer een drag en drop systeem te maken die de waarden van de destinationfields in de mysql gaat opslaan. Er zijn wel nog een paar dingen die niet werken.
Ik kan items verslepen van links naar rechts maar ik zou meerdere destination fields willen hebben waarin de waarden kunnen opgeslagen worden. Ook zou ik de velden in de sourceFields container moeten kunnen laten laten zodat de waarden ook in meerdere destinationFields containers kunnen geplaatst worden.
De gegevens van iedere destination container moeten ook in een mysql tabel opgeslagen worden.
Het script dat ik hier heb gebruikt: https://github.com/mateagar/fieldChooser
Ik heb ook een fiddle gemaakt met het voorbeeld zoals hieronder: http://jsfiddle.net/kq7h6pkp/

De html code:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
        <div id="fieldChooser" tabIndex="1">
            <div id="sourceFields">
                <div>First name</div>
                <div>Last name</div>
                <div>Home</div>
                <div>Work</div>
                <div>Direct</div>
                <div>Cell</div>
                <div>Fax</div>
                <div>Work email</div>
                <div>Personal email</div>
                <div>Website</div>
            </div>
            
            <div id="destinationFields"></div>
        
        </div>



De javascript code:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
        <script>
            $(document).ready(function () {
                var $sourceFields = $("#sourceFields");
                var $destinationFields = $("#destinationFields");
                var $chooser = $("#fieldChooser").fieldChooser(sourceFields, destinationFields);
                
            });
        </script>
Gewijzigd op 08/12/2014 10:28:26 door Brecht S
 
PHP hulp

PHP hulp

21/11/2024 22:27:24
 
Jacco Engel

Jacco Engel

08/12/2014 10:26:12
Quote Anchor link
http://jqueryui.com/draggable/

http://www.elated.com/articles/drag-and-drop-with-jquery-your-essential-guide/

http://www.xmech.net/programming/jquery-ui-sortable-tutorial/

De laatste link legt uit hoe je het moet storen. De andere 2 zijn als refferentie :)

Edit :
Ik ben niet in de stemming om onvriendelijke dingen te zeggen, dus ik ga dit verder laten rusten :). Succes met het oplossen van dit probleem :)
Gewijzigd op 08/12/2014 10:48:29 door Jacco Engel
 
Brecht S

Brecht S

08/12/2014 10:37:16
Quote Anchor link
@Jacco: Het opslaan zoals het in je laatste voorbeeld staat lijkt me logisch maar ik denk niet dat het zo eenvoudig ligt, zeker niet als er meerdere destinationField containers zijn. Ook voor de eerste 2 voorbeelden is dit puur het principe van drag & drop maar niet om lijstitems van links naar rechts te verplaatsen zodat ze ook links blijven staan. Sorry, maar ik zie niet echt een toepassing die ik kan gebruiken om mijn voorbeeld hierboven te laten werken.
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.