Question

我有一个Rails应用程序，它有一些<li>元素，样式为display: none; CSS属性。我只想在拖动该元素时使其显示在页面上。但是，某些元素不具有display: none;样式。我该怎么做？

以下是我的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>

我正在使用this javascript进行拖放。

Answer 1

选择所有<li>元素，并在拖动时显示它们。然后在拖动结束时隐藏它们：

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';
   });
});

这是使用HTML5本机拖放功能，您可以在this博客文章中看到。如果它能按您的意愿运作，请告诉我。

更新：

如果你想像你说的那样选择1个元素，你只需在该元素中添加id="myElement"然后选择它就像这样：

let element = document.querySelector('#myElement');

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

更改要显示的样式：块;

1 个答案: