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.