Hide parent element on dragstart event-CodePudding

Using the Google Chrome browser, I need to drag-and-drop an item from a menu, in a way so that the menu will automatically close/hide/collapse/disappear/(or something similar) as soon as the dragstart event fires. This has to be done in a way such that the DOM space is freed up, so approaches using "visibility" and "opacity" for instance while possible are not good for this situation.

Instead, it is necessary to do something like display:none or pushing the menu off of the web page (without scrollbar). However, I've gotten stuck trying to accomplish this and could use some help (or if an alternative approach comes to mind that accomplishes the same, please let me know. I also tried a z-index approach without success.):

Approach 1 - Trying to hide dragged item's parent element via absolute positioning https://jsfiddle.net/gratiafide/4m5r186v/

function dragstart_handler(ev) {
  ev.dataTransfer.setData("text/plain", ev.target.id);
  ev.currentTarget.parentElement.style.cssText = "position:absolute; right:-5000px;";
}

Approach 2 - Trying to hide dragged item's parent via setting display:none https://jsfiddle.net/gratiafide/Luj7d089/

function drag(event) {
  event.dataTransfer.setData("Text", event.target.id);
  document.getElementById('parent').style.display = 'none';
}

You will see in both approaches, the dragged item gets dropped in both instances as soon as the CSS rule gets applied to the dragged item's parent element. I just want to be able to keep dragging the element even though I've hidden or moved the parent element out of sight. Thanks in advance for your help!

CodePudding user response：

You seem to want your parents to disappear by dragging your child's element as it is.

The child element is influenced by the CSS style attribute of the parent element. If parents are erased through css properties such as "display", "visibility", and "opacity", the child element is not visible unconditionally.

Hiding using the "absolute" property(but not z-index -1) is also a way, but unwanted scrollbars may occur depending on the "overflow" attribute of the parent element, and the child element position must be added in reverse and recalculated.

As a result of my test, a dragend event occurred in Chrome when the parent element of the element to be dragged was redrawn. But in Firefox, both of your examples work.

Anyway, to explain based on how it works in Chrome, it is to separate the relationship between Child and Parent and use it as a sibling. Modify your HTML as follows.

<div id='relative_div'>
  <div id="parent"></div>
  <p id="source" ondragstart="dragstart_handler(event);" draggable="true">Drag me to the Drop Zone below</p>
</div>

Next update your CSS as follows. #parent should serve as a background for filling in #relative_div.

#relative_div {
  position: relative;
  overflow: hidden;
  width: 200px;
  height: 100px;
  padding: 2em;
}

#parent {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-color: lightgrey;
}


#source {
  position: relative;
  cursor: grab;
  color: blue;
  border: 1px solid black;
}

Now, regardless of whether you use #parent's "position" to push it away, or hide it using "display", "opaicty", or "visibility", #source drag does not stop.

CodePudding user response：

ok, I think my comment was wrong and that you want to remove the space on the page occupied by the origin element (rather than freeing up memory).

To achieve this, add document.body.removeChild(document.getElementById('parent')); to your drop handler. I've made a js fiddle to demonstrate (with the id=spacer div removed and an extra paragraph below it to show the element is removed):

https://jsfiddle.net/dj825rbo/

(revision following comment clarifying that the origin element should disappear as the drag begins)

This is horrible, but works (horrible because you can't see the text while it is being dragged). It relies on a hidden element into which the origin's content is stored while the drag is proceeding. Replacing the 'drop' event listener with a 'mouseup' listeners, allows the content of the temp (hidden element to be transferred to the target where the mouse click was released)

https://jsfiddle.net/dj825rbo/1/