"Interactive Web Design: Create Drag-and-Drop Functionality with

Greetings! I am endeavoring to create an application featuring a straightforward HTML/CSS draggable tree layout.

<div class="tree">
  <div class="leaf" draggable=true>
    <div class="leaf-handle">item 1</div>
    <div class="leaf subleaf" draggable=true>
      <div class="leaf-handle">item 1.1</div>
      <div class="leaf subsubleaf" draggable=true>
        <div class="leaf-handle">item 1.1.1</div>
      </div>
    </div>
  </div>
  <div class="leaf" draggable=true>
    <div class="leaf-handle">item 2</div>
    <div class="leaf subleaf" draggable=true>
      <div class="leaf-handle">item 2.1</div>
      <div class="leaf subsubleaf" draggable=true>
        <div class="leaf-handle">item 2.1.1</div>
      </div>
    </div>
  </div>
</div>

If you want to view a code example illustrating the issue, you can visit this link: https://codepen.io/DerZinger/pen/bGQbEmd

The challenge I am encountering is that when attempting to drag a branch (an item with subitems), the "ghost" image (which represents the draggable elements) has a non-transparent background that persists despite various attempts to remove it.

Here's what it looks like:

https://i.sstatic.net/wx3N9.png

I urgently need to make it invisible (only showing the leaf-handles of the branch being dragged).

Any assistance or advice on HOW to achieve this would be greatly appreciated.

Edit 1: A suggestion was made to eliminate the background color. I tried doing that, but unfortunately, it did not work as expected. Removing it, making it opaque, and other attempted tricks still fail to completely "hide" the area I wish to conceal: https://i.sstatic.net/KUpM9.png

htmlcssdraggable

Answer №1

After experimenting with various solutions and conducting thorough online research, I have arrived at a practical resolution; not flawless, but currently the most effective option available.

Sample Code:

document.addEventListener("dragstart", function (event) {
  document.querySelector(".tree").style.backgroundColor = "transparent";
  event.target.style.background = "transparent";
  setTimeout(() => {
    document.querySelector(".tree").style.backgroundColor = "red";
    event.target.style.background = "yellow";
  }, 100);
});
.leaf {
  background-color: yellow;
  width: 200px;
}
.leaf-handle {
  background-color: green;
  border: 1px solid black;
}
.tree {
  background-color: red;
  display: flex;
  flex-direction: column;
}

.subleaf {
  padding-left: 30px;
}
.subsubleaf {
  margin-left: 60px;
}
<div class="tree">
  <div class="leaf" draggable="true">
    <div class="leaf-handle">item 1</div>
    <div class="subleaf">
      <div class="leaf-handle">item 1.1</div>
      <div class="subsubleaf">
        <div class="leaf-handle">item 1.1.1</div>
      </div>
    </div>
  </div>
  <div class="leaf" draggable="true">
    <div class="leaf-handle">item 2</div>
    <div class="leaf subleaf" draggable="true">
      <div class="leaf-handle">item 2.1</div>
      <div class="leaf subsubleaf" draggable="true">
        <div class="leaf-handle">item 2.1.1</div>
      </div>
    </div>
  </div>
</div>
<div class="tree">
  <div class="leaf" draggable="true">
    <div class="leaf-handle">item 1</div>
    <div class="leaf subleaf" draggable="true">
      <div class="leaf-handle">item 1.1</div>
      <div class="leaf subsubleaf" draggable="true">
        <div class="leaf-handle">item 1.1.1</div>
      </div>
    </div>
  </div>
  <div class="leaf" draggable="true">
    <div class="leaf-handle">item 2</div>
    <div class="leaf subleaf" draggable="true">
      <div class="leaf-handle">item 2.1</div>
      <div class="leaf subsubleaf" draggable="true">
        <div class="leaf-handle">item 2.1.1</div>
      </div>
    </div>
  </div>
</div>

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

Creating a JavaScript file to incorporate into an HTML document

I stumbled upon this code snippet here This code allows me to fetch data from a php file and insert it into a div using jQuery. While the tutorial works perfectly, I'm planning to use this for about 9-10 different links and thought of consolidating a ...

phpjavascriptjqueryhtmlhyperlink

The text rests on a slanted div with a captivating background image

How can I place text over a skewed div with a background image? Despite using the ::before pseudo element, the text is appearing behind the image. Here's an example of what I'm attempting to achieve: Html <div class="diag-right">Text Here ...

htmlcss

Showing a notification that is persistent and not dismissible

Hello everyone! I've been struggling with a problem on the RPS project for quite some time now. The issue arises when I try to display a message for a tie in the game, but I can't seem to find a solution to make it disappear when the round is not ...

javascripthtmlcss

Font size determined by both the width and height of the viewport

I'll be brief and direct, so hear me out: When using VW, the font-size changes based on the viewport width. With VH, the font-size adjusts according to the viewport height. Now, I have a question: Is there a way to scale my font-size based on ...

javascripthtmlcsssass

Tips for implementing validation in a multi-step form as outlined in w3schools tutorial

I came across a multistep form creation tutorial on w3schools. However, the tutorial only covers generic validation (checking if a field is empty), which is not sufficient for my needs. How can I implement HTML validation (e.g., min, max, length) for text ...

javascripthtmlcssbootstrap-4

Ways to adjust the quantity of a product in PHP MySQL or JavaScript, including methods for increasing, decreasing, and inserting a quantity value with a checkbox option

Is it possible to adjust or remove the quantity of a product using PHP MySQL or Javascript? Can you also include a checkbox for setting a quantity value along with a product? <form action="addtocart.php" method="post"> <table width="100%" c ...

phpjavascripthtmlmysql

Switch between input and the input is not displayed inline

I've been struggling to align the Toggle button with the input box for quite some time now. I really need them to be inline so that they form a grid properly as everything is dynamic. I have experimented with using a Div on its own instead of a label ...

htmlcss

Using Python, Scrapy, and Selenium to extract dynamically generated content from websites utilizing JavaScript

I am currently utilizing Python in combination with Selenium and Firefox to extract specific content from a website. The structure of the website's HTML is as follows: <html> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8"> ...

javascriptpythonhtmlseleniumscrapy

use python selenium to retrieve text enclosed by two span elements

<li class="page-item active"> <span class="page-link"> "12" <span class="hjhs">(current)</span> </span> </li> After reviewing the code above, my objective is to extr ...

pythonhtmlseleniumxpathtext

Is there a single function that can handle multiple sliders sharing identical options?

Currently, I am utilizing jQuery UI to generate 6 sliders with identical options for a survey. I am curious if there exists a method to merge all these sliders into one function while maintaining the ability to operate them individually? If such a soluti ...

jqueryhtmlcssjquery-ui

Scrolling through image galleries with automatic thumbnails

I am looking to create an automatic image scrolling feature on my webpage using a bunch of images I have. I have searched for a solution but have not found one that fits my requirements. I don't think a carousel is the right approach for this. The sol ...

javascriptjqueryhtmlcssbootstrap-4

Creating interactive elements within Bootstrap 5 Popovers: A step-by-step guide

I've been attempting to include a button inside the Popovers in Bootstrap, but so far I have not been successful. Currently, I am using Bootstrap-Popover and my goal is to place a button inside the popover. HTML <div class="col-lg-4 mb-3 ser ...

htmlbootstrap-5

Utilize jQuery to duplicate the image source and set it as the background for a div element

I'm struggling with cloning the URL string from the src attribute of an image. My goal is to store the string as a variable so that I can use it to update the background-image CSS property. ... Taking an image and setting it as a background in another ...

jqueryhtmlcssimageweb

Navigating through history using the pushState method and incorporating back and forward buttons

I am trying to implement back and forward buttons functionality with this ajax method The code is working well, and the URL in the browser is changing as expected However, when I click on the back and forward buttons, nothing happens (function(){ ...

javascriptajaxhtmljquery

Rotating a CSS div causes the page to scroll horizontally

Currently, I am working on creating a unique design for the footer of my website. However, when implementing it, I encountered an issue that is causing a horizontal scroll (red background added for clarity). https://i.sstatic.net/K4vnV.jpg To address thi ...

htmlcssrotationcss-transformshorizontal-scrolling

How to enable multiple selections in a Bootstrap 5 form-select, but restrict users to selecting only one

I am looking to create a modal with a list of options where only one option can be selectable. The default form-select is a dropdown menu that requires an unnecessary click, which I want to avoid. I would like all options to be displayed without the need f ...

htmldrop-down-menubootstrap-5

The Datalist feature in the MVC application is malfunctioning on the production server, yet it is functioning properly

In my application, I am facing an issue with the datalist functionality. It works perfectly in the Development environment but fails to show any lookup results in the Production environment. Using datalists is crucial for providing auto-complete features, ...

asp.net-mvchtmlautocompletehtml-datalist

Understanding the values of attributes when submitting a reactive form

My form is built using Angular's reactive forms and includes an input element with custom attributes: <input type="text" [attr.data-challengeId]="value.id" [formControlName]="value.label"> When I submit the form, I only receive the value of th ...

javascripthtmlformsangular

Is it possible to rotate a group within an SVG without altering the orientation of the gradient fill it contains?

In my search on SO, I came across a lot of information about rotating gradients. However, my issue is the opposite. I have an icon created from multiple paths that I want to fill with a vertical gradient. I have successfully done this and it works well. ...

cssanimationsvglinear-gradients

The challenge of PHP's HTTP_REFERER

I am experiencing an issue with http_referer. In my setup, I have two files: index.php and index.html. The index.php file contains a form that, upon submission, includes information like the http_referer. On the other hand, the index.html file runs an aja ...

javascriptphphtmlajaxhttp-referer