Releasing the mouse button after dragging successfully without the use of any libraries

I have implemented a pure CSS snap scroll feature and now I need to determine the position of an element in relation to the viewport once the user stops dragging. However, I prefer not to rely on any complex libraries as I do not require any actual movement or dropping functionality. All I want is to trigger an event upon mouseup. The issue I am facing is that the mouseup event does not get triggered if I move my cursor while holding down the left mouse button. For your reference, I am working with Vu3.

<span id="handle" class="card-handle" onmouseup="myMethod"></span>

Seeking a simple solution since I do not need extensive dragging capabilities for my project.

javascriptvue.jsmouseuponmouseup

Answer №1

If you're looking to implement this functionality, you could consider using the following approach:

<span id="handle" class="card-handle" ondragend="myFunction(event)" draggable="true"></span>

Within your Vue methods section, include the following code:

methods: {
   myFunction() {
    var x = e.clientX;
    var y = e.clientY;
    var coor = "Coordinates: (" + x + "," + y + ")";
    console.log(cor);
  }
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Which is the better option for data storage: JSON files or MySQL database?

I am currently developing a project that utilizes the vis.js JavaScript framework to showcase a visual network of various categories. There are approximately 2000 categories available for selection, each with a substantial amount of associated data. I am ...

javascriptmysqljson

Extract data from a JSON file and refine an array

Currently, I am working with reactjs and have an array stored in a json file. My current task involves filtering this array using the selectYear function. However, when attempting to filter the data using date.filter, I encounter the following error: An ...

javascriptjsonreactjs

Using jQuery and Flask-WTF to achieve live word count in a TextAreaField - a step-by-step guide!

I am interested in adding a real-time word count feature to a TextAreaField using jQuery. I found an example that I plan to use as the basis for my code: <html lang="en"> <head> <script src= "https://code.jquery.com/jquery ...

javascripthtmljquery

How to grab JSON data within a CakePHP 2.2 controller

Trying to transmit JSON data from a web page using JQuery, as shown below: $.ajax({ type: "post", url: "http://localhost/ajax/login", data: '{username: "wiiNinja", password: "isAnub"}', dataType: "json", contentType: "applica ...

javascriptjsoncakephp

Having trouble with the Mysqli query not functioning properly in PHP code after being dispatched via Ajax

I am encountering a problem with a specific Myqsli query. $sqlselect = "SELECT visitatori_id FROM visitatori WHERE visitatori_nome='".$nome."' AND visitatori_cognome='".$cognome."' AND visitatori_orastart='".$time."' AND v ...

javascriptphpjquerymysqlajax

Refresh ng-repeat array after implementing filter in controller

I am currently facing an issue with updating my table view when changing a variable that filters an array. The filter is applied in the controller based on the values of a specific variable called columnFilter. However, the filter does not reapply to updat ...

javascriptangularjs

Check if a user is currently on the identical URL using PHP and JavaScript

In my Laravel and AngularJS project, I have a functionality where users can view and edit a report. I'm looking to add a feature that will prevent multiple users from editing the report at the same time - essentially locking it while one user is makin ...

javascriptphpajaxangularjslaravel

Implementing hover effect triggered by keyboard input

Is there a way to create a hover effect on a div when a specific key is pressed on the keyboard using jQuery? <div id="d-up" class="button"></div> Appreciate any help with this! Thank you. ...

javascriptjqueryhtmlcss

What is the process for deselecting a checkbox?

I am facing a situation where I need to uncheck a checkbox that is always checked based on user input from another section of my form. Specifically, I have implemented an onChange="functionName" event on a select box. Can someone guide me on how to accom ...

javascriptjqueryhtml

Configuring Webpack for a React application with Express and Babel

I am in the process of developing a React application, utilizing React version ^15.6.1 along with Webpack, Express, Babel, and Yarn as the package manager. After successfully running the application, I am now preparing to transition it to production by co ...

javascriptreactjsexpresswebpackbabeljs

Encountered an unfamiliar custom element: x while utilizing Buefy

Following the Buefy guidelines, I took the necessary steps. First, I ran: npm install Buefy Next, in my main.ts file, I imported Vue, Buefy, axios, and VueAxios like so: import Vue from 'vue'; import Buefy from 'buefy'; import axio ...

vue.jsbuefy

Error: The dynamic selection function is experiencing an issue where it is unable to read the "map" property of an undefined

Currently, I am in the process of creating a React component that includes the usage of a select HTML input. The implementation is defined as shown below: <select className="form-control-mt-3" id="clientList" name="clientList" onChange={this.handleC ...

javascriptreactjs

Create a feature that allows users to view photos similar to the way it

I want to incorporate a Twitter feed on my website that displays images posted. Instead of having the images redirecting users to Twitter when clicked, I would like them to reveal themselves underneath when a link labeled "View Photo" is clicked, and then ...

javascriptjquerytwitterjquery-events

Combining webpack encore and Symfony, we can easily integrate VueJS single file components (SFC) into our project's style

Working on a Symfony5 project, I am incorporating the VueJS framework using Single File Components (SFC). Within my VueJS component styles, I need to utilize the "url" css rule to define file paths. Specifically for designing a div with background-image ...

vue.jssymfonysymfony5webpack-encore

Issue with executing Jquery in PUG file: The $ sign is not being recognized despite jQuery being imported

I am encountering an issue where my jQuery code placed inside a pug template is not executing as expected. Despite including the jQuery file, when trying to run a jQuery function, I receive the error below: 40| P 41| ...

javascriptjquerynode.jspug

Modifying the language of the response (error/success) in stripe.js

I have successfully implemented stripe.js v2 for processing payments in my application catering to a French client. Everything is working smoothly, but I am facing an issue with form validation. I want the error messages to be displayed in French instead o ...

javascriptphpapistripe-payments

Issues with error handling in ExpressJS arise frequently

In the server.js file, towards the very end, there is a block of code that appears to handle errors: app.use(logErrors); function logErrors (err: Error, req: Request, res: Response, next: NextFunction) { console.log(err); mongoDal ...

javascriptnode.jsexpresserror-handling

AngularJS Currency Converter - Converting Currencies with Ease

I have a question regarding the most efficient way to handle currency conversion on a webpage. Currently, I have multiple input fields displaying different currencies. When a user clicks on the currency conversion button, a modal popup appears. After the ...

javascriptangularjstypescriptangularjs-directive

Leveraging Prototype's Class creation function to declare confidential and safeguarded attributes and functions

Looking for a solid approach to defining private and protected properties and methods in Javascript? Check out this helpful discussion here on the site. Unfortunately, the current version of Prototype (1.6.0) doesn't offer a built-in method through it ...

javascriptoopprivateprototypejsprotected

typescript error caused by NaN

Apologies for the repetitive question, but I am really struggling to find a solution. I am facing an issue with this calculation. The parameters a to g represent the values of my input from the HTML. I need to use these values to calculate a sum. When I tr ...

javascripttypescript