I see. Thanks for clearing that up for me.
I had to work around it by defaulting back to Angular directives for
anything including jQuery-UI.
Cheers!
Miguelángel Fernández M.
Life is what happens to you while you're busy making other plans.
--John Lennon.
On 19 February 2015 at 18:19, Eric Bidelman <[email protected]> wrote:
>
> The lightdom attr was removed a long time ago. That said, Polymer 0.8 will
> have an option to create elements without shadow dom.
>
> On Thu, Feb 19, 2015, 5:19 AM null <[email protected]> wrote:
>
>> 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]> 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/59099d4c-d574-4379-9cae-feea15a1604a%40googlegroups.com
>> <https://groups.google.com/d/msgid/polymer-dev/59099d4c-d574-4379-9cae-feea15a1604a%40googlegroups.com?utm_medium=email&utm_source=footer>
>> .
>> For more options, visit https://groups.google.com/d/optout.
>>
>
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/CAK2td25Djoc4rcJL%2BXgho6JWUpHGuf%2BgP3W268tr5oQwud92Ag%40mail.gmail.com.
For more options, visit https://groups.google.com/d/optout.
