The CSS content property within a style element prevents the dragging of elements

Is it possible to make an element with content draggable in HTML while changing the image through replacing the style of the element? I am trying to insert a picture using the content style tag, but it seems to make the element lose its draggable ability. Any suggestions on how to achieve this?

Here's a simple example:

<!DOCTYPE html PUBLIC>
<html>
 <head>
  <style type="text/css">
   .no-picture {
    width: 100px;
    height: 100px;
    border: solid 10px black;
   }
   .with-picture {
    width: 100px;
    height: 100px;
    border: solid 10px black;
    content: url(myimage.png);
   }
  </style>
 </head>
 <body>
  <div class="no-picture" draggable=true></div>
  <div class="with-picture" draggable=true></div>
 </body>
</html>

The div element with "no-picture" style can be dragged, but those with "with-picture" do not seem to react to dragging attempts (tested in Chrome). The only noticeable difference is in the content style.

Answer №1

Achieving the same effect is possible by using the background property:

<!DOCTYPE html PUBLIC>
<html>

<head>
  <style type="text/css">
    .no-picture {
      width: 100px;
      height: 100px;
      border: solid 10px black;
    }
    
    .with-picture {
      width: 100px;
      height: 100px;
      border: solid 10px black;
      background: url("https://picsum.photos/200");
    }
  </style>
</head>

<body>
  <div class="no-picture" draggable=true></div>
  <div class="with-picture" draggable=true></div>
</body>

</html>

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

Bootstrap-tour is incompatible with a row within a table structure

Is there a way to highlight a table row effectively? I've been struggling with it and tried using the fix mentioned in this bootstrap-tour issue here Check out this demonstration on jsFiddle: jsFiddle JAVASCRIPT $("#dialog").dialog(); var t = new ...

Add an item to the second occurrence of a specific HTML class

I am facing a challenge where I need to add an element to another element, but the target element is only identified by a class that is used multiple times. Specifically, I need to append to the last or second occurrence of the element. You can see a visua ...

Detecting a click event within a hidden div located behind another visible div

I am facing an issue with triggering ng-click in a div that is covered by another div. The current scenario I have is as follows: https://i.sstatic.net/SfM5y.jpg Basically, I need to activate ng-click on the yellow circle when it is clicked. However, the ...

Struggling to input information from a web form into a MySQL database using PHP

I'm currently facing an issue with my form not being able to submit data to the MySQL database. Strangely, I'm not receiving any error messages that could help me identify the root of the problem. I experimented by changing the action method to G ...

step-by-step guide to disabling grayscale mode automatically

In recent times, a trend has emerged in Thailand where many websites are appearing in grayscale. This is achieved through the use of -webkit-filter: grayscale(100%), filter: grayscale(100%) and similar filters. Although it is possible to revert these webs ...

Issue with JavaScript function loading website homepage solely is functioning only for the first time

I am in the process of creating my own personal website. To ensure seamless navigation, I added a "home" button that, when clicked, triggers a JavaScript function called loadhomepage() to load the homepage. While this function works perfectly upon initial ...

Is it possible to relocate an iframe outside the body of a post in Blogger?

For my blog posts, I have a goal of relocating the first iframe used outside of the post body and into a custom div called #myvideos. Some blog templates, such as this example, have already achieved this by moving a video out of the post body. I would like ...

Tips for displaying and concealing columns in Blazor QuickGrid based on breakpoints

I encountered an issue when attempting to hide a PropertyColumn on small screens in Blazor 8 using the regular Bootstrap 5 method. By adding Class="d-sm-none d-md-block" to the QuickGrid component's PropertyColumn, it seems that the Bootstra ...

Steps for including variables assigned in a PHP file into a PHTML file

I am having trouble loading all the content from a phtml file into a php file Everything is functioning correctly except that the variables in the phtml file are not being loaded with their values Below is my php file <?php $firstname = $_POST[' ...

issues with jquery functionality on mobile devices

I'm currently working on a website where I've implemented a jQuery script to dynamically load specific parts of an HTML page with an ID of 'guts' into the main content area. The goal was to keep the menu consistent while only changing t ...

The combination of Bootstrap and Django does not support responsive design

My code is not working correctly, and I'm struggling to identify the errors. The website I'm working on has subpages, but the responsive design doesn't seem to be functioning properly. Could this issue be related to mistakes in my HTML/CSS c ...

Adjust Scale to Less than 1 in JVectorMap

I am in the process of developing a website that includes a full-size map using JVectorMap. The map currently occupies 100% of the width and height of the page, but I would like to add a border around it when fully zoomed out. However, when the map is zoom ...

What are the best practices for integrating PrimeVue with CustomElements?

Recently, I decided to incorporate PrimeVue and PrimeFlex into my Vue 3 custom Element. To achieve this, I created a Component using the .ce.vue extension for the sfc mode and utilized defineCustomElement along with customElements.define to compile it as a ...

The clip-path in Div: Css is malfunctioning and not displaying correctly

I am trying to create a chat bubble using CSS with rounded corners and a bottom-right arrow. However, I am having trouble getting the arrow to display correctly. https://i.stack.imgur.com/gVXOV.png The CSS styling for the chat bubble is as follows: ...

Can we show the dropdown with the active button?

Can someone assist me in transforming my sidebar buttons into dropdowns when viewed on a responsive layout? I'm looking for something similar to the sidebar (on the left) featured on this website: If possible, I would like the dropdown to only displa ...

Avoid displaying the homepage link in the menu on Grav

I'm working on my very first Grav website. Currently, I am in the process of creating a navigation menu and would like it to display links to all visible pages except for the homepage. The issue I'm facing is that the homepage appears as the fir ...

How to Make Page Slide in Either Direction Based on User Click Location

Although the title of my question may not be very descriptive, I am essentially trying to implement a functionality where a page will slide right if a user clicks a link to the right of their current active link, and slide left if they click a link to the ...

Is there a way to automatically close the Foundation topbar menu when a link is selected?

On my single page website, I am utilizing Zurb Foundation's fixed topbar which includes anchor links to different sections of the page. My goal is to have the mobile menu close automatically whenever a link inside it is clicked. As it stands now, whe ...

Is there a CSS3-compatible CSS parser available in C/C++?

Are there any C/C++ CSS parsers that currently support CSS3? I have come across a few, but none of them seem to offer full CSS3 compatibility. ...

Parsing HTML code using PHP's DOM parser for iteration

<div class="reviews-summary__stats"> <div class="reviews-summary"> <p class="reviews-title">A</p> <ul class="rating"> <li class="rating__item r ...