Mousedrag jQuery

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

C# developer

Functie Als C# ontwikkelaar ben jij de spin in het web bij deze organisatie. Jij begeleidt en traint de field engineers die bij de klanten machines leveren en installeren. Daarnaast ondersteun jij de field engineers als zij bij de klant vastlopen bij het installeren van de machine m.b.t. software matige vragen. Jouw doel is dan ook om de technische kennis van de field engineers door middel van training zoveel mogelijk uit te breiden. Dit om ervoor te zorgen dat zij zelfstandiger software matige problemen kunnen oplossen. Ook ben jij verantwoordelijk voor het bedenken van software oplossingen voor klanten en dit

Bekijk vacature »

Senior front-end developer (React)

Functie Momenteel zijn ze op zoek naar een ervaren front-end developer. Als senior werk je nauw samen met 5 collega developers. Een klein scrum team dus, met korte lijnen waardoor jouw ideeën snel tot uitvoering gebracht kunnen worden. De huidige applicaties worden veelal ontwikkeld met o.a. React, Redux, TypeScript. Ze zijn echt op zoek naar een kartrekker in het team. Naast het meedenken over, opzetten en uitvoeren van bijvoorbeeld de architectuur of toepassing van nieuwe technieken krijg je ook veel tijd om de meer junior (front-end) developers te begeleiden. Hierin nemen ze graag de tijd om mensen de ruimte te

Bekijk vacature »

Junior .NET developer

Functie Wij hebben drie scrumteams. Het eerste team focust zich op het stukje hardware wat wij in huis doen. Zij maken als team o.a. gebruik van C++. De andere twee scrumteams zijn allebei bezig met data verwerking en maken hierbij in de backend gebruik van C# .NET / .NET Core. Het verschil tussen deze teams is dat één team de data verwerking doet voor de mobiele applicatie. Zij werken hierbij dus ook met Xamarin. Het andere team focust zich op de webapplicaties en maakt hierbij ook gebruik van ASP.NET MVC. Op basis van jouw ambities en kwaliteiten kijken wij samen

Bekijk vacature »

Software developer (Python)

Functie Je komt te werken in het IT-team bestaande uit de Lead developer en 4 (medior/senior) developers. Gezamenlijk werken jullie aan de verbetering en uitbreiding van de software. Binnen het development team is er veel vrijheid en zelfstandigheid, zonder dat ze hiermee afdoen aan de kwaliteit. Zo hebben ze elke ochtend een korte stand-up (10:00 uur) en houden ze zo nu en dan pair-programming sessies. Ook is er een hele professionele ontwikkelcyclus waarbij code altijd eerst door een collega wordt getest voordat het naar deployement gaat. Je hebt in je werk oog voor kwaliteit, risico’s en het klantbelang. Communicatie met

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 »

Senior pega developer

You work on software that makes colleagues and customers happy! Thanks to your IT skills, De Mandemakers Groep really makes a difference for its customers. Do coding, testing and deployments make your heart beat faster? Then apply today as Senior Pega Developer at De Mandemakers Groep! Wat ga je doen? The job title gives it away: You will be developing Pega software. This ranges from technical design, coding and testing to test automation, deployments and bug fixing. Your goal is to continuously improve our systems so that colleagues can work efficiently and customers receive optimal service. You don't have to

Bekijk vacature »

Front-end Developer

Do you want to work with the latest technologies on the development of new systems and applications? Create elegant interfaces using VueJS for thousands of users? Get moving and strengthen Nederlandse Loterij as a Front-end Developer. Thanks to your efforts, our services are always presented in style. As a Front-end Developer you are responsible for website development and improving customer experience based on data analyze. In this way, you directly contribute to a happy, healthy and sporty Netherlands. As a Front-end Developer you score by: Writing elegant, testable components without side-effects to provide functionality to the users Website development, adding

Bekijk vacature »

C#.NET developer

Functie Het development team bestaat momenteel uit vijf backend C#/.NET ontwikkelaars. Op dit moment zit één ontwikkelaar dedicated op de mobiele applicatie. Als team werk je samen aan het zelf ontwikkelde software platform. Dit bestaat uit zowel apps als websites. Om het systeem door meer dan honderdduizenden gebruikers wordt gebruikt is het bijna vanzelfsprekend dat de kwaliteit van het product hoog moet liggen. Het systeem bestaat uit drie projecten. Je werkt dus aan deze drie projecten waarbij de focus op z’n tijd verschuift. De technieken die worden toegepast zijn o.a. .NET Core, Xamarin, C# en MVC. Je zal dus met

Bekijk vacature »

Front end developer binnen het onderwijs

Functie Het doel van dit team is om te zorgen dat de studenten altijd op de hoogte zijn van relevante informatie en de mogelijkheid hebben om online vragen te stellen. Hiervoor hebben ze een portal ontwikkeld. De app is echt een greenfield project met een eigen inrichting middels cloud. De ontwikkeling wordt gedaan door gebruik te maken van oa. Javascript, React, CSS, Next.js, GraphQL in een Azure Cloud omgeving. Daarnaast gebruiken ze tooling als Figma, storybook, Jest en Github. De complexiteit in deze rol zit hem in het feit dat data uit verschillende bronsystemen komt waarbij er zowel gekoppeld wordt

Bekijk vacature »

IoT Software Developer PHP

Functie omschrijving Voor een klein softwarebedrijf in Breda, zijn wij op zoek naar een IoT software developer met kennis van PHP. In deze rol wordt je verantwoordelijk voor het vernieuwen van het multimedia platform van een super tof bedrijf in Breda. Je gebruikt PHP als programmeerlaag, en bent in staat om de helicopterview te pakken / projectmatig te werken. Jouw werkzaamheden zien er als volgt uit: Je gaat aan de slag met de ontwikkeling en vernieuwing van het "intern" ontwikkelde multimedia platform. Je neemt de lead in het moderniseren van het platform door het deels opnieuw op te zetten of

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 »

Senior, Medior and Junior SAP HANA Developer

Vacature details Vakgebied: Software/IT Opleiding: Medior Werklocatie: Veldhoven Vacature ID: 12696 Introductie Our client is the world's leading provider of lithography systems for the semiconductor industry, manufacturing complex machines that are critical to the production of integrated circuits or chips. Our purpose is “unlocking the potential of people and society by pushing technology to new limits”. We do this guided by the principles “Challenge”, “Collaborate” and “Care”. Wat verwachten we van jou? SAP Certified Application Associate - SAP HANA Cloud Modeling (training and/or certification) Bachelor degree or higher Excellent understanding of SAP HANA (2.0 / Cloud), Data Modelling and writing

Bekijk vacature »

Infrastructure Developer

Vacature details Vakgebied: Software/IT Opleiding: Senior Werklocatie: Eindhoven Vacature ID: 12945 Introductie Our client is one of the most innovative companies within the Netherlands. Currently we are looking for an Infrastructure Platform Engineer. Within this role you will be developing the infrastructure. Functieomschrijving Within this role you are responsible in the development of our distributed data and compute platform infrastructure. You will design, develop and implement new features and fixes. Next to this you will integrate and configurate other packages that supports the development of tuning applications within the organisation. You will support customer sites remotely. Design and implement the

Bekijk vacature »

Software Programmeur PHP - JAVA

Functie Heb jij altijd al willen werken voor een bedrijf, dat veilige netwerkverbindingen levert, door middel van veilige oplossingen, die door middel van de nieuwste technologieën ontwikkelt zijn? Stop dan nu met zoeken! Voor een opdrachtgever in omgeving Moordrecht zijn wij op zoek naar een programmeur. Hoe kan jouw dag er straks uitzien? Je gaat software en webapplicaties ontwikkelen met behulp van de talen C / C++ / PHP. Je gaat technische klussen uitvoeren op locatie bij klanten. Je onderhoudt contact met de projectleider om er zeker van te zijn dat een projecten goed verlopen. Je gaat klanten ondersteunen op

Bekijk vacature »

Traineeship IT regio Amsterdam/Utrecht

Wat ga je doen? Het traineeship begint met een fulltime maand cursussen en praktijkdagen, waarin je de basis van het IT-vak leert op de Shared Servicedesk (SSD). Daarnaast ga je meteen aan de slag voor je eerste certificering! (ITILv4). Je start in een groep met 4 tot 10 deelnemers, waarmee jij gedurende die maand optrekt en je kennis kunt delen. Na het voltooien van de eerste maand ga je direct voor een langere periode aan de slag bij één van onze klanten of blijf je intern bij ons op de Shared Servicedesk. Je bent het eerste aanspreekpunt van de eindgebruikers

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

25/11/2024 08:50:09
 
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.