可拖动、可拖放和可移动的触摸幻灯片

Posted 2023-03-12

【中文标题】可拖动、可拖放和可移动的触摸幻灯片

【英文标题】：Draggable, Droppable and Mobile Slide with Touch

【发布时间】：2013-12-10 18:45:54

【问题描述】：

问题：

我的问题是，在添加一小段代码以使其仅在小于 480 的屏幕尺寸上加载之前，我一直具有此功能，因此可以移动。以前，它工作得非常好，现在，无论我走多少路并追溯我所做的事情，我就是想不通，希望有人能回答我为什么没有发生这种情况。

工作原理

所以我的项目中发生了不止一件事，我有东西被拖动，东西被保存，你可以用手指从左向右滑动，然后拖动一个图标并将其放在你滑动的项目上。

现在有效的是;刷卡，将我的图标拖放到刷卡项目上，只是不要保存或接受。它以前有效，现在无效。我开始认为它可能只是错误的 javascript 版本。

这就是我所拥有的

application.html.erb file

 <%= stylesheet_link_tag "bootstrap" %>
 <%= stylesheet_link_tag "boilerplate" %>
 <%= stylesheet_link_tag "application" %>

 <%= javascript_include_tag "application" %>
 <%= javascript_include_tag "bootstrap" %>
 <%= javascript_include_tag "jquery.ui.touch-punch" %>

 <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.js">         </script>

 <script type="text/javascript">
 function loadjscssfile(filename, filetype)
 if (filetype=="js") //if filename is a external JavaScript file
 var fileref=document.createElement('script')
 fileref.setAttribute("type","text/javascript")
 fileref.setAttribute("src", filename)
 
 else if (filetype=="css") //if filename is an external CSS file
 var fileref=document.createElement("link")
 fileref.setAttribute("rel", "stylesheet")
 fileref.setAttribute("type", "text/css")
 fileref.setAttribute("href", filename)
 
 if (typeof fileref!="undefined")
 document.getElementsByTagName("head")[0].appendChild(fileref)
 

 $(function () 
  var width = $(window).width();
  if (width <= 480) 
      loadjscssfile("/assets/idangerous", "js");
      loadjscssfile("/assets/idangerous.swiper", "css");
   else 
      $('').appendTo('head');
  
 );
 </script>


 <script type="text/javascript">
 window.onload = function() 
 var mySwiper = new Swiper('.swiper-container',
  //Your options here:
  mode:'horizontal',
  loop: true
  //etc..
 );  
 
 </script>

注意：这就是我的 application.html.erb 文件与我正在加载的 javascript 的外观。

我没有收到任何错误，但除非我取出 iDangerous Swiper 脚本，否则我的拖放操作将停止工作。

【参考方案1】：

对我有用的是为每个需要的场景定义一个这样的助手。

def mobile_device?
  request.user_agent =~ /android|blackberry|iphone|ipad|ipod|iemobile|mobile|webos/i
end
helper_method :mobile_device?

def cell_device?
  request.user_agent =~ /android|iphone/i
end
helper_method :cell_device?

然后，在我看来，有了辅助方法，我会根据它是单元格还是平板电脑来为我需要的任何样式和 javascript 执行此操作。现在可能不是最干净的，但在我们的情况下，一个很好的解决方法可以完美地在现场环境中尝试。