I am working on a Rails application that contains some <li> elements with the CSS property display: none;. I want these elements to only appear on the page when they are being dragged. However, there are some elements that do not have the display: none; style. How can I achieve this?
Below is the HTML code snippet :
<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>
I am utilizing this JavaScript library for drag and drop.