Do you ever notice that when you move an image, a semi-transparent ghost image follows your mouse as long as you hold it down?
Is there a method using CSS/JS to eliminate this effect on specific sections?
Do you ever notice that when you move an image, a semi-transparent ghost image follows your mouse as long as you hold it down?
Is there a method using CSS/JS to eliminate this effect on specific sections?
To ensure the drag image is set off-screen, simply assign extremely high coordinates to the x
and y
parameters of the setDragImage
method. Here's an example:
element.addEventListener('dragstart', function(event) {
event.dataTransfer.setDragImage(element, -99999, -99999);
}, false);
The specific element being passed to setDragImage
is interchangeable in this case. We are using the same element for simplicity.
To prevent this behavior in the browser (the same applies to Safari), one method is to simply return false
within the onmousedown
event of the img
element (or use event.preventDefault()
), then handle the drag operation using JavaScript.
Most popular JavaScript libraries offer built-in support for 'dragging' and 'dropping'. You can utilize their existing code as a foundation or directly integrate it into your page if you are already utilizing a library.
To prevent image dragging, simply include the attribute draggable="false"
within the image tag. It is also suggested to wrap the image in a container div
.
For example:
<div draggable="true">
<img draggable="false" src="your/path/to/image.png"/>
Optional Text
<div>
In addition, implement the following JavaScript function:
function handleDragStart(e) {
// other code
var dragIcon = document.createElement('img');
dragIcon.src = 'another/image/path.png';
e.dataTransfer.setDragImage(dragIcon, -10, -10);
// other code
}
One option to consider is utilizing css background images in place of traditional img tags for your visuals.
To solve the issue with the ondragstart
event, returning false is crucial. I encountered this problem myself and found this to be an effective solution. This particular problem is prominent in IE7 due to its drag and drop api, the standardization of it into html5, and firefox's subsequent adoption of it.
Using a javascript library for drag and drop functionality may not be helpful in this case. Despite already using jquery UI, it doesn't seem to address this specific issue which has arisen recently in firefox.
Unfortunately, it seems that this issue is due to the browser's default behavior or feature. I am not aware of any particular CSS style in Firefox that can resolve this.
If you truly want to address this concern, you may need to consider customizing the code in Firefox to create your own personalized version. If you are seeking a non-programmatic solution, perhaps posting on superuser.com could provide some helpful insights :P
There is a way to disable the dragging images in Firefox by adjusting the nglayout.enable_drag_images
setting in about:config
, but keep in mind that this change will only affect your own browser. If you're looking to disable it for all visitors, you may want to consider using jQuery UI or another JavaScript library for drag & drop functionality.
With jQuery UI, you can easily move elements around and even create visual effects using CSS sprites to minimize HTTP requests. For example, I once created a jigsaw puzzle game using jQuery UI which appeared to be made up of multiple images but was actually just one image cleverly displayed.
I have encountered a major issue that has stumped me so far. Perhaps you can assist me. I am dealing with a table that appears as follows: __________________________________ | | time1 | time2 | time3 | +--------+-------+-------+-------+ | John | ...
I currently have a special-table component that includes a box shadow when the row is expanded https://i.stack.imgur.com/8zgjp.png I am aiming for the removal of the box-shadow effect. After inspecting the console-style tab, I identified https://i.stac ...
( ) I'm currently working on a website dedicated to searching for GitHub users as part of my React course. However, I seem to be facing an issue with the website not fetching the response properly, possibly due to an Axios error. When searching for ...
As a newcomer to JavaScript, I'm facing a challenge that I can't seem to solve. I have an array of objects with two attributes each, and my goal is to pair these attributes where one acts as the key and the other as the value. This is my current ...
If I have a simple code snippet like the following: <ListItem button={true} > <Typography variant='caption' color='primary'> {value} </Typography> <Button onClick={foo} > Button ...
We are encountering challenges with users repeating a specific action, even though we have measures in place to prevent it. Here is an overview of our current approach: Client side: The button becomes disabled after one click. Server side: We use a key h ...
I have been trying to show the browser window width using onResize() but I can't seem to get it to work. Despite reading numerous posts about it, the JavaScript never runs (The alert doesn't show up). The method of using onResize="dispScreenWidt ...
After referencing my previous question, I have encountered another issue. The div that is displayed contains links within it. When I click on these links, the div disappears as expected but not in the desired manner... (we want it to disappear whenever we ...
I regularly utilize jQuery along with jQuery.ajax to make connections between pages. I am interested in establishing a connection from a non-SSL page to an SSL page using ajax. Are there any web browsers that will attempt to connect via non-SSL if the con ...
After crafting a unique home page/landing page for my website that stands out from the rest, I've come across an issue. The header and footer are appearing on this new page, but I only want to display what I specifically coded. I attempted using Site ...
Encountering a linting error when attempting to navigate to a new route by clicking on a table row. The functionality is working but how can I resolve this issue? It's showing an error message stating "The property "id" for type TData does not exist." ...
I'm having issues adding a data attribute to an HTML element. The data attribute (data-description) may include special characters like apostrophes. InsertHtml = InsertHtml + '<tr id="DashboardRow0" data-description=\'' + JSON. ...
Why does the top attribute in the animate function of JQuery not seem to work, while the opacity attribute functions correctly in the code snippet below? $(function() { $(window).on('scroll', function() { ...
Need some help with a top navigation setup for a website where I have a div inside an li element. Encountering issues in IE 7 where there are "holes" in the box causing the drop down to disappear when the user is still interacting with it. Initially trie ...
Currently working on a website using HTML5 and Bootstrap 4, I encountered an issue while attempting to convert a square image into a circle. Previously in Bootstrap 3, this was achieved simply with the .img-circle class. However, I seem to be having troubl ...
Is there a way to rearrange the submenu links so they appear stacked vertically instead of horizontally? Currently, they line up next to each other under the main menu and subsequent links fall below the submenu. I believe it involves adjusting the positio ...
After working on my component library in vue and using rollup to wrap it up, I encountered an issue with the mixins not getting included in the final library. Initially, I suspected that the problem lied in the paths since most of the mixins were local. I ...
My application seems to be running smoothly, but once I hit F5 in the browser, an issue arises. The structure of my app is as follows: Node.js + Express, in Express : app.use(express.static('public')); app.use( app.router ); app.use(function(r ...
Currently working on a website where applications are being accepted. In the admin panel, I want to display a list of all applicants and allow users to click on a name to view more information. However, I'm facing an issue where the same applicant is ...
After completing the Google Introduction to Push notification code lab, I am eager to incorporate Push notifications into my VueJS PWA. The only hurdle I face is that the service worker fails to prompt users for notification permissions. The code snippet ...