Hi Eric, I'm new to Polymer and I'm trying to get it to work with jQuery UI draggable and resizable. Seems weird to me,but for some reason I can get draggable to work straight away (without the helper override you propose), but I can´t get resizable to work. I'm trying to use the lightdom attribute as you suggest, but it still doesn't work and when I inspect the element with Chrome Dev Tools I can still see the internal markup being posted as shadow dom instead of light dom. I´ve searched the Polymer documentation for the lightdom attribute and how to use it (thought maybe I'm just doing something wrong), but I can't find anything. Could you point me in the right direction here?
Thank you, On Tuesday, 7 January 2014 20:55:01 UTC+1, Eric Bidelman wrote: > > 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] <javascript:>> > 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] <javascript:>. >> 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/59099d4c-d574-4379-9cae-feea15a1604a%40googlegroups.com. For more options, visit https://groups.google.com/d/optout.
