0

I am using 

$('.swipeenabled').draggable({ axis: "x"})

for getting x-draggable feature.

I have the following order of js files:

<script type="text/javascript" src="{% static "crsq/js/zippednewsapp/jquery-1.10.2.js" %}"></script>
<script type="text/javascript" src="{% static "crsq/js/zippednewsapp/bootstrap.js" %}"></script>
<script type="text/javascript" src="{% static "crsq/js/zippednewsapp/jail.js" %}"></script>
<script type="text/javascript" src="{% static "crsq/js/zippednewsapp/jquery-ui.js" %}"></script>
<script type="text/javascript" src="{% static "crsq/js/zippednewsapp/jquery.touchSwipe.min.js" %}"></script>

We know that draggable is working, since ui-draggable class gets added to the elements .swipeenabled

But, the dragging feature does not work. What are the possible reasons? The jquery and jquery-ui js files are not corrupt. I have checked that.

Irvin Dominin
  • 30,819
  • 9
  • 77
  • 111
Pratik Poddar
  • 1,353
  • 3
  • 18
  • 36
  • I guess some problem with jquery files and its order – Neel Apr 29 '14 at 06:40
  • Have you tried creating a barebone example with only the required javascript? If the stripped down example works you may have conflicts with other scripts. – luke2012 Apr 29 '14 at 06:40
  • A simple demo works here: http://jsfiddle.net/GSpdW/1/; can you provide more context? Your HTML code? Any errors in the console and network? – Irvin Dominin Apr 29 '14 at 06:45
  • When I remove the other js files, it still does not work. So, there is no issue of conflict. The order is jquery and then jquery-ui. So, that should also be fine. What else can be the issue? – Pratik Poddar Apr 29 '14 at 07:49
  • When I use google cdn jquery and jquery-ui libraries. Still nothing. No error. Its being executed for sure, because ui-draggable class gets added – Pratik Poddar Apr 29 '14 at 07:55
  • @IrvinDomininakaEdward no error on console. no error on network. – Pratik Poddar Apr 29 '14 at 07:59
  • @PratikPoddar provide your HTML markup or a demo on jsfiddle – Irvin Dominin Apr 29 '14 at 08:01
  • Please open mobile user agent and check it out please. http://www.zippednews.com/evernote Note that .swipeenabled has .ui-draggable in it. – Pratik Poddar Apr 29 '14 at 08:05
  • @PratikPoddar I see what is the purpose of being draggable? I see is working fine with swipe feature – Irvin Dominin Apr 29 '14 at 10:17
  • @IrvinDomininakaEdward In between swipe and touch, a drag feature would give user response that your input is being taken. Better UI. – Pratik Poddar Apr 29 '14 at 11:35
  • Got the solution. Its the same as: http://stackoverflow.com/questions/13940421/how-to-get-jqueryui-drag-drop-working-with-touch-devices – Pratik Poddar May 07 '14 at 13:40

1 Answers1

0

you need to load the jQuery library before jQuery UI:

For example below code works:-

<script type="text/javascript" src="Javascript/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="Javascript/jquery-ui-1.10.2.custom.min.js"></script>     
<script type="text/javascript">
  $(function() {
   $('.swipeenabled').draggable({ axis: "x"})       });
</script>
<body>
  <div class="swipeenabled">
    <p>Drag me around</p>
  </div>

DEMO:-

http://jsfiddle.net/u7zWA/395/

Neel
  • 11,625
  • 3
  • 43
  • 61