Altering pointer during drag操作

Is it feasible to customize the cursor during a drag operation?

I've been exploring ways to achieve this for some time now. My goal is to replace the default 'not-allowed' cursor that appears when dragging an object with a different cursor.

One approach I attempted was creating an event and associating it with the image I intended to drag:

<img id="drag1" class="drag" src="http://www.example.com/image.png" draggable="true" ondragstart="drag(event)" />

Here is the JavaScript code snippet I used:

function drag(ev) {
    $('#drag1').css('cursor', 'grabbing');
}

jsfiddle demo

Note: My current project involves HTML5 drag and drop functionality, thus it is essential for me to be able to modify the cursor while dragging a div with the HTML5 'drag' attribute.

javascriptjquerycssdragmouse-cursor

Answer №1

The 'not-allowed' cursor indicates that there hasn't been any draggable element set up yet. To make an image draggable, you need to use the .draggable() method. You can find more information about this method at http://api.jqueryui.com/draggable/. This method also allows you to specify a custom cursor to be used while dragging the image.

You can easily implement this by using the following code:

$( "#drag1" ).draggable({ cursor: "pointer" });

Check out this example on http://jsfiddle.net/wpcbM/3/

Answer №2

Absolutely, it can be done. Simply swap out the cursor for the item you are currently dragging, rather than the one you are moving it to.

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

What is the best way to send variables from one page to another using jQuery or Javascript?

Is there a way to use POST with jQuery/Javascript to send data to another page and then redirect to that page? Instead of using GET... Using Javascript window.location = 'receivepage.php?variable='+testVariable; Once it's received by PHP ...

phpjavascriptjquerypost

Attempting to control an array of objects

In my current records: The parts with IDs 14.3, 14.2, and 14.1 belong to part ID = 30. The goal is to achieve the following: 1) By default, the first two IDs will be selected. If a user tries to select ID = 71, which belongs to part 30, they should not ...

javascriptangularjs

What is the best way to design a footer that remains fixed at the bottom of the screen but becomes unfixed when the user scrolls down?

Currently, I am working on creating a footer that remains fixed at the bottom of the user's screen regardless of the screen size. However, I also want the header to transition from a fixed position to being part of the page when the user scrolls down. ...

javascriptjquerycssscroll

AngularJS allows you to dynamically update a list by adding elements to the end as

I have a specific requirement to showcase a lineup of elements in a single row, granting users the ability to scroll through them. Upon reaching the end of the scroll, a function should be triggered to add more elements to this lineup. I've successfu ...

javascriptjqueryhtmlcssangularjs

Assistance needed for jQuery functions running too early

Within my click function, I am setting certain flags and then calling two functions. However, I want these two functions to execute sequentially in order after the flags have been set. jQuery("#element").click(function(e){ var op = jQuery("#box" ...

javascriptjquery

The Power of AngularJS Directives in Harnessing jQuery DOM Event Bindings

I have developed a new directive and have some doubts about the binding syntax like element.bind("click", function(){}). Every time the link function of the directive is called, it creates a duplicate binding. What is the best Angular approach to handle th ...

javascriptjqueryangularjs

What is the best method for transferring form data to a string and storing it in localStorage effectively?

Is this the most efficient method for extracting form data into a string and storing it in localStorage? I developed this method independently, but I'm not an experienced programmer. It seems to work for my needs, but I'm unsure if it's com ...

javascriptjquery

Combine two columns into a single table column using HTML/CSS and JavaScript with the help of Datatables

I utilize the DataTables library from https://datatables.net/ to create sortable and searchable tables on my website. However, my table becomes too wide due to the numerous columns it contains. I am looking for a way to condense the width by merging relate ...

javascripthtmlcssdatatables

How to efficiently pass dynamic props in Next.js persisting layoutuciary

When setting up a persistence layout, I utilize the getLayout function on each page as shown below: import { Layout } from 'hoc'; const Page = () => { return ( <div>hello</div> ); }; Page.getLayout = function getLayout(pa ...

javascriptreactjsnext.js

How can I make arrays of a specific length and populate them in JavaScript?

For instance: I have over 100 locations in a single array, each with latitude and longitude values. I need to use these locations with the Google distance matrix API to find nearby shops for my users. The issue is that this API can only handle 25 destinat ...

javascriptarraysjavascript-objects

Searching for the clicked tr element within a tbody using jQuery

Here is my customized HTML table layout <table> <thead> <tr> <td class="td20"><h3>Client Name</h3></td> <td class="td20"><h3>Details</h3></td> ...

javascriptjqueryhtml

The CSS modifications are only visible in my browser after I delete the browsing data

After setting up a landing page with simple text in the center of the screen using flex, I encountered an issue. Whenever I made changes to the CSS, they would not reflect in my browser unless I cleared the browsing data (history, cookies, etc). This probl ...

htmlcssflexboxflex3

The value of req.files consistently shows as undefined

My issue is with req.files consistently returning undefined. Despite attempting connect-multiparty, body-parser, and express-fileupload, I can't seem to make it work with express-fileupload instead of multer. Can anyone help me troubleshoot this probl ...

javascriptnode.jsexpressexpress-fileupload

As a newcomer to Javascript, I am currently working on developing a CRUD-based application and could use some assistance with implementing the Edit functionality

I am currently in the process of developing a Javascript CRUD application that showcases data within an HTML Table. I have successfully implemented the Create, Read, and Delete functions. However, for the Edit function, I am looking to display the data in ...

javascripthtmlarraysjsoncrud

What is the best way to combine two JSON objects?

Item A: var item1 = { "roleid": "001", "techid": "001", "role": "WEB DEVELOPER", "tech": "JAVASCRIPT", "experience": [], "certifications": [], "gender": ["Male"], "awards": [], "min_experience_years": "4", "max_expe ...

javascriptjqueryjson

Tips on utilizing React and Node to upload text as a file to Google Drive

Are you wondering how to incorporate React.js as the frontend and Node.js as the backend for uploading/reading files from Google Drive? In my attempts, I've tried writing a string as a text file and then uploading it to Google Drive by following this ...

javascriptnode.jsreactjs

Creating fresh paths in ReactJS

Is it possible to implement new routes in react JS with the current code provided below? I am looking for a way to create a route that does not need authentication. ReactDOM.render( <Provider store={store}> <PersistGate loading={null} ...

javascriptreactjsjsx

Issue with Angular Script not functioning upon reopening the page

I recently completed my first website, which can be found at Despite my efforts, I've encountered an issue that has me stumped. When you navigate to the certificate page, you should be able to input your name onto the certificate. However, if you sw ...

javascriptjqueryhtmlcssangularjs

The alignment for Bootstrap's NAV element within a display:table-cell element seems to be off when viewed on Firefox浪

Here is an example of HTML markup with Bootstrap library included: <div class="container"> <div class="card"> <ul class="nav list"> <li class="element"> <a href="#">Element</a> </li> ...

htmlcsstwitter-bootstrap

Weekly downloads for NPM show no activity

https://i.stack.imgur.com/4Uhk4.png https://i.stack.imgur.com/0vikS.png Why are all the weekly downloads showing zero for npm packages? I'm new here and confused about why this is happening, any insights? If you could please help me open this issue ...

javascriptangularjsnode.jsreactjsnpm