Javascript 更改样式以显示：块；

我有一个Rails应用程序，它有一些样式为display:none的

元素CSS属性。我想让它仅在拖动该元素时显示在页面上。但是，有些元素没有
显示：无样式。我该怎么做

以下是我的HTML代码：

<div class="col-xs-12 col-md-6 col-lg-3">
                            <li id="<%=video_upload.id %>"  <% if video_upload.invisible == true %> <%= "style=display:none;" %> <%end%>   >
                                <% if mobile? %>
                                    <a href="<%= showvideo_path(video_upload.id) %>">
                                        <div style="background-color: white">
                                            <%= image_tag("/images/upload_images/"+"#{video_upload.imagename}", height: '130', width: '200') %>
                                        </div>
                                    </a>
                                <% else %>
                                    <div style="background-color: white">
                                      <img src="<%= '/images/upload_images/'+"#{video_upload.imagename}" %>" class="img-responsive" style="cursor:pointer" onclick="popVideo('https://app.box.com/embed/s/<%= video_upload.link[/([^\/]+)$/] %>');" >
                                    </div>
                                <% end %>

                                <span style="float: left">
                                    <%= File.basename(video_upload.imagename, '.*') %>

                                </span>

                                <span style="float: right">

                                    <%= link_to '', edit_video_uploads_path(video_upload), {class: 'btn btn-primary  glyphicon glyphicon-pencil', :style => 'color: white'} %>

                                    <%= button_tag(:del_flag => 'button', :id => video_upload.id ,:class => 'btn btn-danger user-approve-btn glyphicon glyphicon-trash') do
                                    ""
                                    end %>
                                </span>
                            </li>
                        </div>



“class=“img responsive”style=“cursor:pointer”onclick=“popVideo”https://app.box.com/embed/s/');" >
'颜色：白色'}%>
‘按钮’，：id=>video_upload.id，：class=>‘btn btn危险用户批准btn Glyphion Glyphion垃圾箱’）执行
""
结束%>


我正在使用javascript进行拖放操作。
选择所有
元素，并在拖动时显示它们。然后在拖动结束时隐藏它们：

document.querySelectorAll('li').forEach(li => {
   // Show the <li> on drag
   li.addEventListener('dragstart', event => {
       event.target.style.display = 'block';
   });

   // Hide each <li> back
   li.addEventListener('dragleave', event => {
       event.target.style.display = 'none';
   });
});

共享您的html代码如何拖动不可见的元素？嘿，伙计，我们需要查看您的完整html代码，否则我们将无法猜到您的页面中有什么。我不想拖动不可见的元素。我想在拖动其他元素时使其可见。该不可见的元素用于拖放目的。非常感谢。我有一个问题。如果我只需要显示和隐藏我想要的元素，而不是所有元素，该怎么办？要清楚，我只有一个具有
display:none；
属性的元素。我只需在拖动事件时将其取消隐藏，并在拖放事件后隐藏。很抱歉，我的问题不清楚。然后使用
document.querySelector选择这些元素所有
并为每个
dragstart
和
dragleave
应用相同的事件。您可以向html中的
class=“example”
等元素添加一个类，然后使用
document.querySelectorAll（'.example'）
选择它们，然后您可以应用这些事件。非常感谢，Merunas Calagrinitis。让我们一起来。
let element = document.querySelector('#myElement');

element.addEventListener('dragstart', event => {
   event.target.style.display = 'block';
});
element.addEventListener('dragleave', event => {
   event.target.style.display = 'none';
});