Mousedrag jQuery

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Dynamics CRM / Developer

Bedrijfsomschrijving Als onderdeel van een grote IT-dienstverlener is deze organisatie ontstaan en is nu gegroeid tot organisatie van bijna 30 man groot. Iedereen binnen deze organisatie houdt zich bezig met het ontwikkelen, beheren, onderhouden van bedrijfskritische applicaties. In tegenstelling tot de moederorganisatie, werken de medewerkers bij deze organisatie gemiddeld drie dagen in de week gewoon op het eigen kantoor in Utrecht. Mede hierdoor heerst er een erg informele sfeer waardoor jij je binnen no-time thuis voelt! De organisatie staat op het punt om een heel nieuw team met specialiteit Dynamics CRM op te tuigen. Nee, je hoeft zeker nog geen

Bekijk vacature »

ICT System Engineer

Voor de uitbreiding van onze organisatie zijn we op zoek naar een teamspeler en professional: ICT System Engineer (fulltime - Den Haag) Jij maakt impact. In jouw rol als ICT System Engineer denk jij mee met klanten over uitdagingen en mogelijkheden om hun IT te verbeteren. Jij zorgt ervoor dat de klant wordt ont zorgt! Wat is er te doen? Onze klanten hebben gekozen om zich te laten ondersteunen door Aumatics om onze pragmatische en gedegen kennis van de geboden dienstverlening. We worden geprezen voor onze klantvriendelijkheid en korte oplostijden. We kennen onze klanten en vragen niet om klantnummers. We

Bekijk vacature »

Java Developer- Spring/ JavaScript/ CI / CD

Java Developer- Spring/ JavaScript/ CI / CD BRAND NEW ROLE AVAILABLE IN THE RANDSTAD, NETHERLANDS, WORKING WITH AN ESTABLISHED IT CONSULTANCY Flevoland location, easily accessible by car and public transport Java/ Open Source/ Agile/ CI / CD Competitive Salary To apply please call +31 (0)208 004 990 or email me; widdowson@searchability.com With our HQ in Almere we a specialist consultancy who are on the lookout for a number of Dutch speaking Java Developers to join the team. We have options for project work across the Randstad. Sourced by: @SearchabilityEU– your 24/7 twitter feed of latest IT vacancies across Europe WHO

Bekijk vacature »

SAP EWM Consultant

SAP EWM Consultant Functiebeschrijving: Help jij als SAP EWM consultant onze klanten de stap te maken naar de high performance organisatie van de 21e eeuw? Wat ga je doen? Als SAP EWM consultant adviseer je onze klanten in vraagstukken bij gebruik van SAP in het logistieke domein. Samen met de klant werk je op locatie aan logistieke oplossingen. Daarbij ben je in staat je klant mee te nemen in je verhaal. Dit doe je door je te verdiepen in de klant problematiek. Je zet dit vervolgens om in haalbare oplossingen. Van idee tot implementatie ben je betrokken. Je hebt invloed

Bekijk vacature »

Systeembeheerder Windows Welkomstbonus € 5.00

Systeembeheerder Windows medior Welkomstbonus van € 5.000,- Bij T2 zorgen we goed voor elkaar en doen wij leuke dingen met leuke mensen. We zorgen voor uitdagende opdrachten zodat jij jezelf onbeperkt kan blijven ontwikkelen. Ben jij een ervaren systeembeheerder Windows en wil je het beste uit jezelf halen? Dan ben je van harte welkom bij T2 en ontvang je onze welkomstbonus ter waarde van € 5.000,-. Er werken leuke mensen bij T2, die op een professionele en informele wijze met hun carrière en collega’s omgaan. Dat is de basis voor succes! Het is vanzelfsprekend dat je met de nieuwste technieken

Bekijk vacature »

XML JAVA ontwikkelaar

Bedrijfsomschrijving KOOP ontwikkelt en beheert momenteel onder meer de volgende producten: Wet- en regelgevingsportalen (o.a. Wetten.nl en CVDR ). Hier kunnen gebruikers op basis van trefwoorden en andere criteria wetten en regelgevingen inzichtelijk krijgen; PUC Open Data platform (o.a. puc.overheid.nl en afgeleide producten en interne kennisbanken). Hier publiceren overheidsorganisaties zelf hun uitvoeringsinformatie die publiekelijk beschikbaar is, zoals beleid, handboeken, werkinstructies en berichten. Wettenpocket+ (o.a. portaal en App voor Android en iOS). Hiermee kunnen de gebruikers Wettenpockets raadplegen. Een Wettenpocket bundelt relevante regelgeving en aanvullende informatie op een specifiek rechtsgebied, en kan worden samengesteld door verschillende organisaties binnen de Rijksoverheid. PLOOI

Bekijk vacature »

Software Engineer

Passie voor code, droom jij ’s nachts je bugs weg, is coderen je hobby en je werk. Dan ben jij de perfecte kandidaat voor onze e-ICT afdeling in Doetinchem! Wat ga je doen? Als Software Engineer ben je met jouw scrumteam van A tot Z betrokken bij het (door)ontwikkelen van de software. Je maakt daarbij gebruik van de nieuwste technieken waaronder o.a. Azure, .Net core, Docker en werkt aan mooie producten zoals RFID, microservices, Apps en een integratieplatform gebaseerd op Azure technologieën. Dit alles doe je volgens de Agile-methodiek en bent naast de dagelijkse stand-up betrokken bij de reviews, sprintplanning

Bekijk vacature »

Java Developer / Overheid / Complexiteit

Bedrijfsomschrijving Binnen de organisatie zijn meer dan 10.000 medewerkers dagelijks werkzaam op meer dan 30 verschillende locaties. In deze dynamische omgeving is geen dag hetzelfde. Dit komt door de snelheid waarmee veranderingen plaatsvinden. Dagelijks hebben jouw werkzaamheden direct invloed op het transport van mensen, goederen en personeel. Als Java Developer kom je terecht in een hecht team van op de locatie in Assen. Hier zal jij verantwoordelijk worden voor alles wat met Java en de daarbij behorende bedrijfskritische applicaties te maken heeft. De applicatie regelt en registreert alle dagelijkse bezigheden van deze organisatie. Op locatie heb jij dus direct inzicht

Bekijk vacature »

C# ontwikkelaar gezocht, academisch niveau, goed s

Ben je als .NET ontwikkelaar op zoek naar een (nieuwe) analytische uitdagende baan? Een baan waar je te maken krijgt geavanceerde wiskundige modellen? Dan zou deze organisatie je dit kunnen bieden. Voor een organisatie in Delft zijn we momenteel op zoek naar .NET ontwikkelaar met een academisch niveau en kennis of affiniteit met het bouwen van modellen, dataprocessen en applicaties in .NET C#. De organisatie houdt zich bezig met het leveren van zeer specifieke diensten voor de financiële sector en doet veel zaken met grote financiële instellingen. Het gaat hier om een kleinere organisatie van circa 15 mensen waarvan 5

Bekijk vacature »

Medior C# Developer

Samen met het development team zorg je ervoor dat alle systemen achter de schermen vlekkeloos werken. Hoe word ik C# Developer bij Coolblue? Als C# developer doe je regelmatig mee aan brainstormsessies over user experience, data en task flow met de UX Designer, Product Owner en Data Scientist in je team. Daarnaast schrijf je op zichzelf staande, consistente en testbare code die goed onderhoudbaar en toekomstbestendig is. Ook C# Developer worden bij Coolblue? Funda legt je uit hoe je dat doet. Dit vind je leuk om te doen Werken met verschillende soorten data-opslag, zoals Oracle of Dynamo/Cosmos. Problemen oplossen met

Bekijk vacature »

Medior Front-End Developer

Als medior Front-End Developer bij Coolblue verbeter je de gebruiksvriendelijkheid van onze webshop voor miljoenen klanten. Hoe word ik Medior Front-end Developer bij Coolblue? Als Medior Front-end Developer werk je aan de gebruiksvriendelijkheid van onze webshop voor miljoenen klanten. Je vindt het leuk om samen te werken met de UX designer om stories op te pakken. Je krijgt energie van het bedenken van creatieve oplossingen en presenteert dit graag binnen het team. Ook ben je trots op je werk en verwelkomt alle feedback. ‘’Ook Medior Front-end Developer worden bij Coolblue? Else de Boer legt je uit hoe je dat doet.’’

Bekijk vacature »

Junior Front-End Developer

Je maakt een vliegende start van je carrière bij Coolblue, door meteen mee te werken in een team. Hoe word ik Junior Front-End Developer bij Coolblue? Als junior Front-End developer ben je meteen vanaf de start onderdeel van een van de development teams. Omdat je jezelf graag nog verder wilt ontwikkelen, kijk je veel met je collega’s mee en volg je verschillende trainingen. Maar in de sprints pak je ook je eigen stories op, om meteen Coolblue iedere dag een beetje beter te kunnen maken. “Ook junior developer worden bij Coolblue? Else de Boer legt je uit hoe je dat

Bekijk vacature »

Java Developer / Webservices / Overheid

Bedrijfsomschrijving De organisatie waar je komt te werken is een semi-overheidsinstelling die zorgt voor een goede samenwerking tussen verschillende overheidsinstanties. Het is een familiaire club die gaat voor kwaliteit en langdurige relaties. Het bedrijf is gevestigd in hartje Utrecht met het Centraal Station op loopafstand en een parkeergarage naast het pand. Bij deze stabiele organisatie gaat men uit van kwaliteit hoogwaardige softwarediensten. Je zal hier als Java Ontwikkelaar geen projecten tegenkomen waar je uit commercieel oogpunt jouw werk zo snel mogelijk af moet leveren. Uiteraard zal je hier wel het beste uit jezelf moeten halen, maar hierbij ligt het zwaartepunt

Bekijk vacature »

Backend .NET Developer C# Voetbal

Bedrijfsomschrijving Binnen deze organisatie in de regio Den Haag zal je als .NET Developer terecht komen in een multidisciplinair team met 5 andere Programmeurs. In jouw rol ben je verantwoordelijk voor het ontwikkelen en optimaliseren van mobiele applicaties met meer dan 4 miljoen gebruikers wereldwijd. Als Backend Developer zal je dagelijks werken met C#, .NET Core, Kubernetes en een SQL Database. Voor het onderling communiceren van de microservices wordt gebruik gemaakt van RabbitMQ. Je krijgt energie van technische uitdagingen en je werkt graag samen. Verder zul je in vele projecten deelnemen, zorg je voor nieuwe features, los je diverse bugs

Bekijk vacature »

BI Developer

Bedrijfsomschrijving De organisatie waar je komt te werken als (Senior) BI Developer is een grote internationale financiële instelling. Met vele vestigingen in Nederland zijn ze een belangrijke speler op de financiële markt. Jij zal hoofdzakelijk op het kantoor in Amsterdam werkzaam zijn, maar het kan ook voorkomen dat je af en toe naar een andere vestiging gaat. Het bedrijf telt ongeveer 5000 medewerkers waarvan ruim 150 ICT'ers. Het team waar je in komt te werken als (Senior) BI Developer is een ambitieus BI team dat zich bezighoudt met lokale en internationale uitdagingen. Zo zit een Junior BI Developer, 2 (Medior)

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

26/01/2021 00:34:21
 
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.