带有触摸的可拖放，可拖放和移动幻灯片

Question

The Problem:

My problem is that I've had this functioning until adding just a small bits of code to make it only load on screen size lower then 480, so mobile. Before, it worked perfectly fine, now, no matter how much I go and retrace my steps of what I've done, I just can not figure it out and hope someone out there will answer me why this isn't happening.

What's Working

So I have more then one thing happening here in my project, I have things being dragged, things being saved, you can swipe with your finger from left to right and drag an icon and drop it on the items you swipe.

What works right now is the; swipe, the drag but dropping my icon on the swipe items, just don't get saved or accepted. It worked before and not now. I'm starting to thing it might be just the wrong javascript version of something.

Here's what I've got

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>

NOTE: That's how my application.html.erb file looks with the javascript I'm loading.

I'm not getting any error but unless I take out iDangerous Swiper scripts, my drag and drop stops working.

Answer 1

What has worked for me is define a helper like so for each needed scenarios.

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?

Then in my view having the helper methods, I did that for whatever styles and javascripts I needed based on if its a cell or tablet. Maybe not the cleanest right now but a good work around that in our situation works perfectly from trying it out in live environment.