Hello Polymerizers ! The #2 works fine on Chrome, even If I enable touch on Chrome dev tools.
I am trying to use polymer and draggable on an Ipad / IOS (Safari mobile or webviews). I am using jQuery ui touch punch http://touchpunch.furf.com/ to enable drag on component with touch events instead of mouse events. It works fine until you are setting a specific Handler to jquery ui draggable on Safari mobile: $( this.$.container ).draggable({handle : "#grip"}); Here is the sample that is not working on Ipad / IOS Safari mobile... try to drag the yellow handle http://jsbin.com/juvecipe/2/edit Looking more deeply at the issue, when the option "handle" is set with: $( this.$.container ).draggable({handle : "#grip"}); the _getHandle function is called in draggable.js https://github.com/jquery/jquery-ui/blob/master/ui/draggable.js line 310 _getHandle: function(event) { return this.options.handle ? !!$( event.target ).closest( this.element.find( this.options.handle ) ).length : true; }, the jquery function .closest( selector) does not work properly ... and cannot find the element. Polymer adds .impl() to javascript objects .. is there a compatibility issue ? On Wednesday, January 8, 2014 8:37:26 AM UTC-5, [email protected] wrote: > > Thanks a lot Eric, fixed ;) > > El martes, 7 de enero de 2014 20:55:01 UTC+1, Eric Bidelman escribió: >> >> Found two ways to get things working: http://jsbin.com/ekIlAlAK/2/edit >> >> 1. use the lightdom >> attribute<http://www.polymer-project.org/polymer.html#createlightdom>on >> <polymer-element>. However, this exposes your internals to the outside >> world. >> 2. override the .helper in your draggable object: >> $( this.$.container ).draggable( "option", "helper", null); >> >> Be forewarned...I have no idea what the ramification of #2 is. There is >> some beastly mouse capture / node finding logic deep within jquery-ui. The >> culprit was 1047 in >> jquery-ui.js<https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.draggable.js#L94> >> returning >> early. >> >> >> On Tue, Jan 7, 2014 at 10:17 AM, <[email protected]> wrote: >> >>> Hello Polymerizers, >>> >>> In my learning tests with Polymer, I am trying to create a draggable >>> component that moves a div around the screen. To do this, my approach is to >>> adapt the following simple but working code using jquery(-ui) >>> capabilities to the polymer architectural style. >>> >>> <div> >>> <style> >>> #container { >>> background-color:blue; >>> width: 100px; >>> height: 100px; >>> border:solid 1px; >>> color: white; >>> padding: 5px; >>> } >>> </style> >>> <div id="container"> >>> Drag me! >>> </div> >>> <script type="text/javascript"> >>> $(function() { >>> $( "#container" ).draggable(); >>> $( "#container" ).resizable(); >>> }); >>> </script> >>> </div> >>> >>> After reading several posts on the subject, my solution looks like this: >>> >>> 1. dragdrop.html: >>> <polymer-element name ="wc-dragdrop" > >>> <template> >>> <link rel="stylesheet" href="../styles/style.css"> >>> <div id="container"> >>> Drag me! >>> </div> >>> </template> >>> <script src="../scripts/dragdrop.js"></script> >>> </polymer-element> >>> >>> 2. dragdrop.css >>> #container { >>> background-color:blue; >>> width: 100px; >>> height: 100px; >>> border:solid 1px; >>> color: white; >>> padding: 5px; >>> } >>> >>> 3. dragdrop.js >>> Polymer ('wc-dragdrop', { >>> ready: function() { >>> $( this.$.container ).draggable(); >>> $( this.$.container ).resizable(); >>> } >>> }); >>> >>> 4. index.html >>> html> >>> <head> >>> <script src="general/scripts/polymer/polymer.min.js"></script> >>> <script src="http://code.jquery.com/jquery-1.10.2.min.js";></script> >>> >>> <script src=" >>> http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js >>> "></script> >>> <link rel="import" href="modules/wc-dragdrop/layout/dragdrop.html"> >>> </head> >>> ... >>> <wc-dragdrop></wc-dragdrop> >>> ... >>> >>> The observed outcome is that surprisingly the dragging effect stops >>> working after the first drop. Does anybody know what is going on? Any ideas >>> on how to fix it? >>> >>> Thanks a lot. >>> >>> Follow Polymer on Google+: plus.google.com/107187849809354688692 >>> --- >>> You received this message because you are subscribed to the Google >>> Groups "Polymer" group. >>> To unsubscribe from this group and stop receiving emails from it, send >>> an email to [email protected]. >>> For more options, visit https://groups.google.com/groups/opt_out. >>> >> >> Follow Polymer on Google+: plus.google.com/107187849809354688692 --- You received this message because you are subscribed to the Google Groups "Polymer" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/928e1fb8-920a-4b6a-a968-b4230f53d26c%40googlegroups.com. For more options, visit https://groups.google.com/d/optout.
