Question

111

html5 draggable hide original element

rated 0 times [ 116] [ 5] / answers: 1 / hits: 22088 / 8 Years ago, sat, april 2, 2016, 12:00:00

When starting to drag an element using HTML5 draggable attribute, original element is still visible, so I end up having two elements visible instead of one.

How can I do to have only the element being dragged visible (the original one should be momentarily hidden).

<script>

  function startDrag() {

    // hide initial element

  }



  function endDrag() {

    // reset initial element

  }

</script>



<div class=draggable draggable=true

  ondragstart=startDrag(event)

  ondragend=endDrag(event)

></div>

Here's a jsfiddle to show the problem https://jsfiddle.net/gjc5p4qp/

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

monetm

Add To Favorites

Follow

Total Points: 615

Total Questions: 103

Total Answers: 119

Location: Finland

Member since Fri, Oct 21, 2022

2 Years ago

monetm questions

1 How to protect API routes in Next.js?

Fri, Feb 26, 21, 00:00, 3 Years ago

1 React props for passing color

Wed, Sep 9, 20, 00:00, 4 Years ago

1 How to catch the error when making fetch api request?

Sun, Jul 26, 20, 00:00, 4 Years ago

1 How to stop propagation on Link elements from React-Router-Dom?

Thu, Jul 2, 20, 00:00, 4 Years ago

1 Wait for an xpath in Puppeteer

Thu, Jun 11, 20, 00:00, 4 Years ago

View All

answered 8 Years ago marques · Accepted Answer

You may succeed this with a hacky solution. The native draggability doesn't allow CSS styles like: opacity:0;, visibility:hidden or display:none.

But you can do it using: transform:translateX(-9999px).

function startDrag(e) {

  let element = e.target;

  

  element.classList.add('hide');

}



function endDrag(e) {

  let element = e.srcElement;

  

  element.classList.remove('hide');

}

.draggable {

  border-radius: 4px;

  background: #CC0000;

  width: 40px;

  height: 40px;

}

.hide {

  transition: 0.01s;

  transform: translateX(-9999px);

}

<div

  class=draggable

  draggable=true

  ondragstart=startDrag(event)

  ondragend=endDrag(event)

/>

I've updated your JSFiddle with the solution.

[EDIT]:

Updated JSFiddle example with Andrew Hedges suggestion by using requestAnimationFrame instead setTimeout.

[EDIT 2]:

Updated with a better solution by Jason Yin adding transition CSS property instead using requestAnimationFrame, it moves the processing from scripting to rendering.