Mousedrag jQuery

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

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 »

.NET Developer

Functie omschrijving Ben jij een senior .NET developer en heb jij tevens ervaring als teamlead? Ben jij iemand met een helikopterview en denk jij graag mee met de klanten? Dan zijn wij op zoek naar jou! Voor een geweldig bedrijf zijn wij namelijk op zoek naar een ervaren .NET developer. Het bedrijf houdt zich bezig met het ontwerpen en bouwen van websites, portalen en applicaties voor met name zorg- en onderwijsinstellingen en overheidsinstanties. Jouw taken: Het fungeren als Lead Developer; Het meedenken met de business (dit vergt commercieel inzicht); Het begeleiden van diverse projecten (van klein tot groot); Het ontwerpen

Bekijk vacature »

HBO startersfunctie .NET Ontwikkelaar

Functie omschrijving We are looking for a dutch native speaker Ben je in januari 2023 klaar met je HBO opleiding en zoek je een mooie uitdaging? Wacht niet langer en solliciteer direct! Voor een familiebedrijf in de regio van Boxtel ben ik op zoek naar een C#.NET Ontwikkelaar. Jij gaat aan de slag met de (door)ontwikkeling van de maatwerksoftware projecten en gaat ook nieuwe software bouwen, middels de Microsoft-stack. Het bedrijf maakt gebruik van de volgende technieken: C# & ASP.NET; MVC; MS SQL; Entity Framework; Je krijgt hier veel tijd om te leren en eventueel door te groeien en het

Bekijk vacature »

Top Low-Code Developer Gezocht!

Bedrijfsomschrijving Unieke Kansen, Uitstekende Arbeidsvoorwaarden & Inspirerend Team Wij zijn een toonaangevende, internationale organisatie die de toekomst van technologie vormgeeft door het creëren van innovatieve en baanbrekende oplossingen. Ons succes is gebaseerd op een hecht en gepassioneerd team van professionals die altijd streven naar het overtreffen van verwachtingen. Als jij deel wilt uitmaken van een dynamische, vooruitstrevende en inspirerende werkomgeving, dan is dit de perfecte kans voor jou! Functieomschrijving Als Low-Code Developer ben je een cruciaal onderdeel van ons team. Je werkt samen met collega's uit verschillende disciplines om geavanceerde applicaties te ontwikkelen en te optimaliseren met behulp van Low-code

Bekijk vacature »

Fasttrack learning & development voor Java dev

Wat je gaat doen: Wij zoeken enthousiaste en ambitieuze junior en medior ontwikkelaars die toe zijn aan de volgende stap in hun carrière. Wij helpen je op je pad naar senior ontwikkelaar door ons fasttrack learning en development programma. Na een kort en intensief programma ga jij aan de slag bij klanten van DPA. Daarnaast krijg je veel ruimte om je te ontwikkelen als persoon en als specialist. De eerste maand gaan we aan de slag om je certificeringen te behalen waaronder OCP (Oracle Certified Professional). Daarnaast nemen we een deepdive in Spring Boot. Ook laten we je kennismaken met

Bekijk vacature »

Senior Developer Betty Blocks Blauwe Haven Rotterd

Functieomschrijving Voor de Politie zijn wij opzoek naar een Senior Developer Betty Blocks Blauwe Haven Rotterdam. De politieorganisatie heeft jaarlijks te maken met een aanzienlijk aantal politiemedewerkers die vanwege mentale overbelasting niet of beperkt inzetbaar zijn. De Blauwe Haven Rotterdam ondersteunt deze politiemedewerkers in hun herstel en re-integratieproces. De huidige digitale systemen van de Politie bieden onvoldoende ondersteuning in het herstel- en re-integratieproces van politiemedewerkers. Zowel voor de politiemedewerkers als voor de organisatie. Politiemedewerkers worden buitengesloten, waardoor zij eigen regie verliezen. Begeleiders kunnen de voortgang van de medewerkers niet goed monitoren. Management beschikt niet over de mogelijkheid trends te signaleren

Bekijk vacature »

Fullstack Developer TOTO

Do you want to work with the latest technologies on the development of new systems and applications? Get moving and strengthen Nederlandse Loterij as a Fullstack Developer TOTO. Thanks to your efforts, complex business critical applications are always running smoothly. In this way, you directly contribute to a happy, healthy and sporty Netherlands. As a Fullstack Developer you score by: Taking ownership of the development cycle of an application in a large scale, high availability, geo redundant landscape Coaching your peer developers and safeguarding code quality Integrating the application with other components of the system using the available API’s Managing

Bekijk vacature »

Front-end Developer

Functie omschrijving Wij zijn op zoek naar een Front-end Developer! Als Front-end Developer binnen dit softwarebedrijf ga je de frontends voor zowel je eigen interne projecten als die voor klanten opzetten, onderhouden en uitbreiden. Je zet ideeën om naar mooie successen voor de klanten. Dat is in een notendop wat je gaat doen! Wat kun je verwachten? Je werkt aan de doorontwikkeling van bestaande maatwerkapplicaties. Bijvoorbeeld wanneer de klant de applicatie wil uitbreiden met een nieuwe feature; Samen met het team van backenders en desginers zet je nieuwe ideeën van klanten om naar mooie oplossingen; Je werkt met verschillende frameworks.

Bekijk vacature »

Low-code developer

Functie omschrijving Heb jij altijd al een training willen volgen in het buitenland? Voor een leuke opdrachtgever in omgeving Alphen ad Rijn zijn wij op zoek naar kandidaten die aan de slag willen als Low Code Developer! Beschik jij over HBO/WO nivo, bij voorkeur Informatica, maar een ander technische opleiding zoals bijv. wiskunde, natuurkunde is ook goed. Heb jij aantoonbare affiniteit met IT en ben jij gedreven, enthousiast, communicatief vaardig en klantgericht? Lees dan snel verder! Je wordt getraind tot een volwaardig Low Code Developer, het traject ziet er als volgt uit: Start 1e week januari, opleiding van 3 weken

Bekijk vacature »

Experienced Lead Java Developer

Vacature details Vakgebied: Software/IT Opleiding: Senior Werklocatie: Delft Vacature ID: 13301 Introductie We are seeking a Lead Java Developer for our team in the area of Delft. You will develop an application used exclusively by the engineers and geologists for site characterizations, which imports raw field and laboratory measurements for further processing, integration, ground modelling, and geotechnical analysis and reporting. The client/server application is entirely written in Java, and the server is hosted in the Amazon cloud, utilizing frameworks such as Spring and Hibernate, and connected to an MS SQL Server RDS instance. There is a trend towards using more

Bekijk vacature »

Teamlead PHP Developer

Functieomschrijving Voor een gewaardeerde werkgever in de buurt van Middelburg zijn wij op zoek naar een gemotiveerde teamlead PHP developer met affiniteit met Symfony/Laravel. Een enthousiast persoon die het ontwikkelteam komt versterken met het aanpakken van uitdagende projecten. Ben jij op zoek naar een uitdaging waar je de tijd en ruimte krijgt jezelf te ontwikkelen en je eigen IT-team aan te sturen? Lees dan snel verder! Die ga je doen: Bijdragen aan de implementatie van aanpassingen, verbeteringen en aanvullingen in de PHP based applicaties; Ontwikkeling en beheer van de serviceportal in Symfony en de webshops in de tweede versie van

Bekijk vacature »

Lead developer

Functie Als lead developer wordt jij verantwoordelijk voor een van onze development teams. Samen met de Software Architect bewaak jij de kwaliteit en uitvoering van onze complexe vraagstukken. Daarnaast ben jij verantwoordelijk voor het inschatten, designen en ontwikkelen van middelgrote tot grote veranderingen in de software. Ook coördineer jij het proces rondom complexe technische vraagstukken. Verder bestaat jouw takenpakket uit het volgende: – Het aansturen van jouw development team; – Het begeleiden van Junior Software Engineers; – Het maken van technische analyses m.b.t. nieuwe aanvragen en het tijdsbestek inschatten voor de uitvoering hiervan; – Het uitvoeren van de ontwikkeling van

Bekijk vacature »

Medior/Senior Software Developers gezocht in de Ra

Functie Op dit moment staan er posities open voor de volgende functies: Front-end, Back-End & Fullstack software developer. Als Front-End software developer werk je met JavaScript en de bijbehorende technologieën zoals TypeScript, Angular, React, Vue en Svelte. Als Back-End software developer ben je bezig in NodeJS en doe je dit met behulp van AWS, NoSQL, REST en GraphQL. Je krijgt leuke en uitdagende opdrachten met een gemiddelde duur van anderhalf jaar. Hier werk je in een team met andere IT’ers aan het ontwikkelen en verbeteren van software. Je wordt begeleid door een accountmanager die fungeert als jouw aanspreekpunt. Het team

Bekijk vacature »

Junior .NET developer

Functie Wij zijn bezig met het ontwikkelen van een nieuw product en wij hebben jouw hulp hierbij nodig! Als junior .NET ontwikkelaar krijg jij de kans om samen met ons deze nieuwe uitdaging aan te gaan! Momenteel bestaat ons team uit drie interim Software Engineers. Twee hiervan zijn zeer ervaren .NET specialisten die inmiddels hun strepen in dit vakgebied al hebben behaald. Ook hebben wij een junior als onderdeel van ons team die zich op dit moment nog bezig houdt met de Front-end (Angular/TypeScript), maar zich nu ook meer gaat verdiepen in de backend. Wij willen ons team graag verder

Bekijk vacature »

Softwareontwikkelaar Cleopatra

Functieomschrijving: De directie Verkeer en Openbare ruimte van de gemeente Amsterdam beschikt over een softwareapplicatie, "Cleopatra", waarmee geautomatiseerde handhaving plaatsvindt (op basis van kentekenherkenning) van bepaalde gebieden waarin toegangseisen worden gesteld aan het verkeer. Voorbeelden ervan zijn de milieuzones, de zone zwaar verkeer, handhaving van bromen snorfietser op het fietspad en autoluwe gebieden. Voor de doorontwikkeling en uitbreiding ervan zijn gespecialiseerde softwareontwikkelaars nodig die helpen bij het programmeren van de handhavingsmodules voor nieuwe gebieden en het verbeteren en bijwerken van de bestaande onderdelen van de softwareapplicatie.De opdracht bestaat uit: het programmeren van de diverse modules;het tijdens demo's tonen van de

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

06/11/2024 00:28:29
 
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.