Mousedrag jQuery

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Junior .NET developer

Functie Ons programma is voor afgestudeerde enthousiastelingen die het als een uitdaging zien om met een klein dynamisch team bij de grootste bedrijven van Nederland aan de slag te gaan. Tijdens jouw dienstverband word jij begeleid door een talent manager. Het ontwikkelen van jouw talent staat hierbij centraal. Het programma doorloop je met een team van circa 8 Mede- trainees. De eerste maand start je met een fulltime inhouse opleiding. Deze staat geheel in het teken van de werkzaamheden die jij verder in het programma zult uitvoeren. Na deze opleidingsmaand ga je aan de slag in een dynamische omgeving bij

Bekijk vacature »

Hands-on Solution Architect / Software Architect (

TenneT is hard groeiend om de onze ambities waar te kunnen maken. Zo nemen wij een leidende rol in het aanjagen van de energietransitie. Het werven van nieuw talent speelt daarin een cruciale rol. Wij zijn op zoek naar een gedreven Solution Architect / Software Architect op onze locatie Arnhem die hieraan wil bijdragen en misschien ben jij dat wel? Jouw bijdrage aan TenneT Je werkt samen met gedreven DevOps teams, bestaande uit frontend, backend en middleware developers, testers, UX-designers. Samen met de teams ben je continu op zoek naar de beste oplossingen voor onze klanten. Als Solution Architect onderzoek

Bekijk vacature »

Senior Java developer

Als Senior Developer bij Sogeti ben je onderdeel van onze toonaangevende best-gecertificeerde Java community. Deze bestaat uit ruim 100 gepassioneerde professionals. In teamverband lever je mooie prestaties. Daarmee draag je aan bij de meerwaarde die wij leveren aan onze top-opdrachtgevers. Geen werkdag is hetzelfde! Je bent voortdurend bezig met het oplossen van allerlei complexe vraagstukken binnen bedrijfskritische systemen. Een voorbeeld hiervan is een cliënt-volgsysteem bij Reclassering Nederland. Andere klanten waar wij onder andere voor werken: KPN, Philips, Nationale-Nederlanden, Kamer van Koophandel, ABN AMRO, Bovemij, Aval en de Nationale Politie. Natuurlijk krijg jij de mogelijkheid je verder te certificeren in dit vakgebied. We

Bekijk vacature »

Oracle APEX developer

Wat je gaat doen: Als Oracle APEX ontwikkelaar bij DPA werk je samen met collega’s aan de meest interessante opdrachten. Je zult je ervaring met SQL, PL/SQL, JavaScript, HTML en CSS inzetten om wensen van opdrachtgevers te vertalen naar technische oplossingen. Je werk is heel afwisselend, omdat DPA zich niet beperkt tot een specifieke branche. Zo ben je de ene keer bezig binnen de zorgsector, de andere keer is dit bij de overheid. Wat we vragen: Klinkt goed? Voor deze functie breng je het volgende mee: Je hebt een hbo- of universitaire opleiding afgerond Je hebt 2 tot 5 jaar

Bekijk vacature »

PHP Developer

Functieomschrijving Wij zijn op zoek naar een PHP Developer met Laravel ervaring! Voor een groeiende werkgever in regio Breda zijn wij op zoek naar een medior PHP developer met Laravel ervaring. Je gaat aan de slag met het ontwikkelen van maatwerk software voor klanten in een specifieke markt. Als PHP developer ben je samen met een gemotiveerd team van 6 collega’s verantwoordelijk voor de ontwikkeling, beheer en het innoveren van informatiesystemen voor klanten in een specifieke branche. Als software developer ondersteun je complexe uitdagingen van klanten. Je brengt hun wensen in kaart en vertaalt deze door naar maatwerk software. Om

Bekijk vacature »

Digital Agency is looking for PHP developers!

Functie The team currently has 20 colleagues, consisting of developers (front and backend) and the operations team, which also includes management and two scrum masters. They are looking for a PHP developer who is able to work independently. You will work in one of the three scrum teams and start working on a project for the customer. The interesting thing about this is that you do have variety in terms of work, but at the same time continuously work for existing customers. This also gives you the opportunity to really go into depth and develop innovative technical solutions. In terms

Bekijk vacature »

Freelance Fullstack Java Developer

Functieomschrijving Voor een opdrachtgever in omgeving Rotterdam zijn wij op zoek naar ervaren Fullstack JAVA Developers die graag op projectbasis willen werken. Je komt terecht bij een informele developers club die mooie projecten uitvoeren voor grote klanten. Ben je een ervaren freelancer of werk je in loondienst en ben je toe aan een nieuwe uitdaging? Lees dan snel verder want wie weet is dit een leuke vacature voor jou! Het fijne van deze werkgever is dat je zelf mag beslissen hoe je te werk wilt gaan. Wil je als freelancer werken dan is dat OK. Wil je de zekerheid hebben

Bekijk vacature »

Traineeship Front-end developer (WO, 0 tot 3 jaar

Functie Zoals beschreven ga je vanaf start aan de slag bij een passende opdrachtgever, hierbij kijken ze echt naar jouw wensen, kennis/ervaring maar ook de reisafstand. Momenteel hebben ze meerdere klanten waarbij ze groepen hebben opgezet wat maakt dat er diverse uitdagende kansen liggen. Naast het werken bij de opdrachtgever, en het volgen van de masterclasses, zul je regelmatig met de andere trainees in contact zijn. Niet alleen op professioneel vlak maar juist ook bij de borrels en kwartaaluitjes! Kortom; een jaar lang hard aan jezelf werken in combinatie met gezelligheid en plezier. Spreek dit jou aan? Dan komen we

Bekijk vacature »

.NET developer

Functie Jouw team van vier collega .NET developers is verantwoordelijk voor het bouwen van de ETL processen van jouw nieuwe werkgever. Op dit moment wordt de front-end gedaan door een extern team van professionals. Echter wilt jouw nieuwe werkgever graag intern deze kennis uitbreiden en heeft dan ook de ambitie om dit voor het eind van het jaar intern te gaan aanpakken. Dit betekend dat jij als .NET ontwikkelaar de ideale kans krijgt om jezelf samen met jouw collega’s te ontwikkelen als full stack developer. Als .NET ontwikkelaar werk jij bij deze gave werkgever met C# .NET, SQL, JavaScript, REST

Bekijk vacature »

TypeScript developer (tot € 6.000, - bruto pe

Functie Om bovenstaande ambities waar te kunnen maken zijn ze op zoek naar een ervaren Typecript developer die niet alleen zichzelf verder ontwikkelt, maar het ook leuk vinden om op termijn meer junior collega’s op pad te helpen. Je zult aan de slag gaan met het migreren van hun bestaande UI in Angular. Maar ook het ontwikkelen van een mobiele app. Hierbij hechten ze veel waarde aan User Experience en kiezen ze duidelijk voor kwaliteit i.p.v. snelheid. Je krijgt dus de ruimte om vanuit gedegen onderzoek te werk te gaan en het borgen van kwaliteit staat hoog in het vaandel.

Bekijk vacature »

C# .NET Backend Developer HBO Javascript

Samengevat: Deze werkgever is een professionele speler op gebied van IT en E-Commerce. Wil jij werken voor een e-commerce platform? Heb je ervaring met C#, Javascript en Scrum? Vaste baan: C# .NET Developer Backend E-Commerce 3.400 - 4.500 Backend Developer Wij ontwikkelen software voor E-Commerce toepassingen. Ons eigen Content Management systeem biedt een integrale oplossing met diverse ERP software. Onze systemen zijn vaak complex en omvangrijk en draaien bij grote organisaties. Maar ook kleine ondernemingen hebben steeds vaker behoefte aan een vlekkeloos werkende E-Commerce oplossing. Zij bieden een uitdagende werkomgeving met gezellige collega's. Je krijgt veel vrijheid en er is

Bekijk vacature »

Oracle Developer / PL SQL

Dit ga je doen Software ontwikkeling aan een internationaal gebruikt pakket; Werken met technieken als Oracle 19c, Toad, PL/SQL, Oracle Forms, Reports en Designer; Meedraaien in internationale projecten; Meedenken over technisch en functioneel ontwerp; Samenwerken met collega's als Informatie Analisten, Testers en Release Managers; Soms wensen en eisen afstemmen met de business. Hier ga je werken Onze klant, een internationaal bekend bedrijf dat essentiële producten maakt waar iedereen graag gebruik van maakt, zoekt versterking in het Software Development team. Samen met 3 developers, een release manager, een informatie analist en 3 testers werk jij aan een systeem waarmee complexe producten

Bekijk vacature »

Software programmeur

Functieomschrijving Voor een erkende werkgever in de regio van Goes zijn wij op zoek naar een enthousiaste software programmeur met PHP/Symfony ervaring. Een gedreven persoon die het development team komt versterken met het aanpakken van complexe projecten. Ben jij op zoek naar een baan met veel uitdaging binnen een snelgroeiend e-commerce bedrijf, waar je de tijd en ruimte krijgt voor zowel professionele als persoonlijke groei? Lees dan snel verder! Dit ga je doen: Beheer en ontwikkeling van de serviceportal in Symfony en de webshops in de tweede versie van Magento; Testen en door ontwikkelen van software; Ontwikkelen van nieuwe functionaliteiten;

Bekijk vacature »

Fullstack JavaScript developer (ReactJS, NodeJS, T

Functie Het team bestaat momenteel uit ruim 15 collega’s, waarvan ruim de helft in het ontwikkelteam werkzaam is. Er zijn gave plannen om het platform ook te gaan toepassen op bijv. vliegvelden, maar ook internationale groei zit in het verschiet en daarom zijn ze op zoek naar versterking. Als Fullstack JavaScript developer werk je nauw samen met 9 fullstack (Python en .NET) developers. Binnen het team ga jij je toespitsen op het creeren van de optimale toegankelijkheid en user experience. Om dit voor elkaar te krijgen zul je ontwerpen, programmeren, testen en implementeren. Het hele proces dus! Maar ook bijvoorbeeld

Bekijk vacature »

SQL ontwikkelaar

Functieomschrijving Voor een gave werkgever in regio Breda zijn wij per direct op zoek naar een SQL ontwikkelaar/ functioneel consultant. Hier wordt jij mede verantwoordelijk voor zowel de design en implementatie van SQL-databases als voor het verstaan van de processen van klanten naar het vertalen van deze processen naar IT-oplossingen. Jouw takenpakket komt als volgt uit te zien: Je test de ontwikkelde oplossingen om er zeker van te zijn dat deze voldoen aan de functionele specificaties en de behoeften van de organisatie; Je ontwerpt, ontwikkelt en implementeert SQL-databases om de data behoeften van de organisatie te ondersteunen; Je stelt op

Bekijk vacature »
Robin S

Robin S

23/05/2012 10:57:38
Quote Anchor link
Beste leden,

Ik wil graag in jQuery controleren of er een mousedrag plaatsvind:

- De gebruiker klikt en beweegt de muis naar rechts
of
- De gebruiker klikt en beweegt de muis naar links

Wanneer dit het geval is moet er een actie/functie uitgevoerd worden.
Heeft iemand enig idee hoe ik dit zou moeten controleren?

Alvast bedankt!

Mvg,
Robin.
 
PHP hulp

PHP hulp

29/03/2024 14:10:37
 
Vincent Huisman

Vincent Huisman

23/05/2012 11:02:04
Quote Anchor link
misschien hier even naar kijken:
http://jgestures.codeplex.com/
 
Kris Peeters

Kris Peeters

23/05/2012 11:41:47
Quote Anchor link
Ik weet niet of dit in alle omstandigheden zal werken; moet je eens grondig testen.
Misschien ook wel wat quick & dirty

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
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Mouse direction</title>
  </head>
  <body>
    
    <div id="hor"></div>
    <div id="ver"></div>
    
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    <script type="text/javascript">
      
      $(document).ready(function(e) {
        // Dit houdt de muispositie bij
        var currentPosition = [0, 0];
        
        // callbacks.
        // hier kan je uiteraard creatievere dingen doen
        function mouseMovedLeft(e) {
          $('#hor').html('Links');
        }
        function mouseMovedRight(e) {
          $('#hor').html('Rechts');
        }
        function mouseMovedUp(e) {
          $('#ver').html('Op');
        }
        function mouseMovedDown(e) {
          $('#ver').html('Neer');
        }
        
        // bij laden pagina
        $(document).mousemove(function(e) {
          if (currentPosition[0] < e.clientX) {
            mouseMovedRight(e);
          }
          if (currentPosition[0] > e.clientX) {
            mouseMovedLeft(e);
          }
          if (currentPosition[1] < e.clientY) {
            mouseMovedDown(e);
          }
          if (currentPosition[1] > e.clientY) {
            mouseMovedUp(e);
          }
          // tijdelijke waarde vervangen door huidige waarde
          currentPosition = [e.clientX, e.clientY];
        });
      });
    </script>
  </body>
</html>
Gewijzigd op 23/05/2012 11:47:20 door Kris Peeters
 
Robin S

Robin S

23/05/2012 12:59:20
Quote Anchor link
@Kris: Enorm bedankt! Het werkt helemaal prima wat je hebt gemaakt! Echter heb ik nog geen idee hoe ik dit kan combineren met een mousedown (dus de bezoeker moet eerst de muis indrukken, en daarna pas naar links of rechts bewegen)
 
Kris Peeters

Kris Peeters

23/05/2012 13:43:56
Quote Anchor link
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
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Mouse direction</title>
  </head>
  <body>
    
    <div id="hor"></div>
    <div id="ver"></div>
    <div id="mouse"></div>
    
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    <script type="text/javascript">
      //  We laten die globaal
      
      $(document).ready(function(e) {
        // Dit houdt de muispositie bij
        var currentPosition = [0, 0];
        var mouseIsDown = false;
        
        
        // callbacks.
        // hier kan je uiteraard creatievere dingen doen
        function mouseMovedLeft(e) {
          $('#hor').html('Links');
          $('#mouse').html(isMousedown());
        }
        function mouseMovedRight(e) {
          $('#hor').html('Rechts');
          $('#mouse').html(isMousedown());
        }
        function mouseMovedUp(e) {
          $('#ver').html('Op');
          $('#mouse').html(isMousedown());
        }
        function mouseMovedDown(e) {
          $('#ver').html('Neer');
          $('#mouse').html(isMousedown());
        }
        
        function isMousedown() {
          return mouseIsDown ? 'Down' : 'Up';
        }
        // bij laden pagina
        $(document).mousemove(function(e) {
          if (currentPosition[0] < e.clientX) {
            mouseMovedRight(e);
          }
          if (currentPosition[0] > e.clientX) {
            mouseMovedLeft(e);
          }
          if (currentPosition[1] < e.clientY) {
            mouseMovedDown(e);
          }
          if (currentPosition[1] > e.clientY) {
            mouseMovedUp(e);
          }
          // tijdelijke waarde vervangen door huidige waarde
          currentPosition = [e.clientX, e.clientY];
        }).mousedown(function () {
          mouseIsDown = true;
        }).mouseup(function () {
          mouseIsDown = false;
        });
        
      });
    </script>
  </body>
</html>  


( het quick & dirty-gehalte zal zeker niet gezakt zijn )
Gewijzigd op 23/05/2012 13:52:42 door Kris Peeters
 
Robin S

Robin S

23/05/2012 13:57:00
Quote Anchor link
Bedankt, ik heb je code een beetje aangepast dat het alleen links en rechts uitvoert. Maar de bedoeling is dat ik een actie uitvoer wanneer een gebruiker eerst klikt, en daarna pas sleept/dragt. Hoe combineer ik deze 2?

Alvast bedankt!

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
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Mouse direction</title>
  </head>
  <body>
    
    <div id="hor"></div>
    <div id="ver"></div>
    <div id="mouse"></div>
    
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    <script type="text/javascript">
      
      $(document).ready(function(e) {
        var currentPosition = [0, 0];
        var mouseIsDown = false;
        
        function mouseMovedLeft(e) {
          $('#hor').html('Links');
          $('#mouse').html(isMousedown());
        }
        function mouseMovedRight(e) {
          $('#hor').html('Rechts');
          $('#mouse').html(isMousedown());
        }
        
        function isMousedown() {
          return mouseIsDown ? 'Down' : 'Up';
        }
        
        $(document).mousemove(function(e) {
          if (currentPosition[0] < e.clientX) {
            mouseMovedRight(e);
          }
          if (currentPosition[0] > e.clientX) {
            mouseMovedLeft(e);
          }

          currentPosition = [e.clientX, e.clientY];
        }).mousedown(function () {
          mouseIsDown = true;
        }).mouseup(function () {
          mouseIsDown = false;
        });
        
      });
    </script>
  </body>
 
Kris Peeters

Kris Peeters

23/05/2012 14:26:32
Quote Anchor link
O ja, juist; ik had daar over gelezen.

Eventueel dit aanpassen:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
        function mouseMovedLeft(e) {
          if (isMousedown()) {
            $('#hor').html('Links');
          }
        }
        function mouseMovedRight(e) {
          if (isMousedown()) {
            $('#hor').html('Rechts');
          }
        }
        function isMousedown() {
          return mouseIsDown ? true : false;
        }
 
Robin S

Robin S

23/05/2012 14:37:43
Quote Anchor link
Helemaal top! Je script werkt geweldig!

Is er nog een optie om een minimale drag afstand in te stellen? Van bijvoorbeeld 100 pixels voordat de actie uitgevoerd wordt?
 
Kris Peeters

Kris Peeters

23/05/2012 15:22:47
Quote Anchor link
Als je hier ooit schatrijk van wordt ... laat iets weten he :)

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
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Mouse direction</title>
  </head>
  <body>
    
    <div id="hor"></div>
    
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    <script type="text/javascript">
      //  We laten die globaal
      
      $(document).ready(function(e) {
        // Dit houdt de muispositie bij
        var currentPosition = [0, 0];
        var mouseIsDown = false;
        var mouseDownPosition = false;  // default: false; when mouse down, it stores that value.  On mouseUp, set back to false
        
        // callbacks.
        // hier kan je uiteraard creatievere dingen doen
        function mouseMovedLeft(e) {
          if (isMousedown() && isTriggerd(e)) {
            $('#hor').html('Links');
          }
        }
        function mouseMovedRight(e) {
          if (isMousedown() && isTriggerd(e)) {
            $('#hor').html('Rechts');
          }
        }
        function isMousedown() {
          return mouseIsDown ? true : false;
        }
        function isTriggerd(e) {
          if (mouseDownPosition == false) {
            return false;
          }
          if ( Math.abs(mouseDownPosition[0] - e.clientX) > 100) {  // absoluut verschil > 100 ?
            return true;
          }
          return false;
        }
        
        // bij laden pagina
        $(document).mousemove(function(e) {
          if (currentPosition[0] < e.clientX) {
            mouseMovedRight(e);
          }
          if (currentPosition[0] > e.clientX) {
            mouseMovedLeft(e);
          }
          // tijdelijke waarde vervangen door huidige waarde
          currentPosition = [e.clientX, e.clientY];
        }).mousedown(function (e) {
          mouseIsDown = true;
          mouseDownPosition = [e.clientX, e.clientY];
        }).mouseup(function (e) {
          mouseIsDown = false;
          mouseDownPosition = false;
        });
      });
    </script>
  </body>
</html>


Zoals het nu is, ondervind ik wel nog problemen met tekst-selectie.
Ik weet niet of dat in jouw geval ook een probleem zal zijn
 



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.