There is a navigation bar, fixed.

It has a div with the ovelflow property in which child blocks are located and you need to drag blocks across the page from it using Jquery, but they disappear when dragging - they are not visible.

If you add draggable({ revert: true, helper: "clone" }); then everything works, only the original remains in its place. How to make the original disappear when you move it, and when the helper returns to its place it appears again?

JSFiddle example

  • Hello! one). On JSFiddle, you can click the Tidy button and the code will be put in order. 2). I can try to fully implement it in pure javascript, without jQuery, will this option suit you? - Alexander Kazakov
  • one
    About JSFiddle I will know now, thanks! And on js, I think, I will not need to torment what is! - Dima Dima

1 answer 1

I found a solution - at the start of dragging, we make the original object completely transparent, and at the end we return to it the normal transparency

 $(".in-inner").draggable({ revert: true, helper: "clone" }).on('drag', function(){ $(this).css('opacity','0'); }).on('dragstop', function(){ $(this).css('opacity','1'); });