Problems creating a drag&drop component using Jquery ui

414 views
Skip to first unread message

javier.ve...@gmail.com

unread,
Jan 7, 2014, 1:17:49 PM1/7/14
to polym...@googlegroups.com
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>    
    <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. 

Eric Bidelman

unread,
Jan 7, 2014, 2:55:01 PM1/7/14
to javier.ve...@gmail.com, polymer-dev
Found two ways to get things working: http://jsbin.com/ekIlAlAK/2/edit

1. use the lightdom attribute 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 returning early. 


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 polymer-dev...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.

javier.ve...@gmail.com

unread,
Jan 8, 2014, 8:37:26 AM1/8/14
to polym...@googlegroups.com, javier.ve...@gmail.com
Thanks a lot Eric, fixed ;)

sacha.l...@gmail.com

unread,
May 13, 2014, 4:38:45 PM5/13/14
to polym...@googlegroups.com, javier.ve...@gmail.com
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

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 ?

miguela...@gmail.com

unread,
Feb 19, 2015, 8:19:45 AM2/19/15
to polym...@googlegroups.com, javier.ve...@gmail.com
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,

Eric Bidelman

unread,
Feb 19, 2015, 12:19:46 PM2/19/15
to miguela...@gmail.com, polym...@googlegroups.com, javier.ve...@gmail.com


The lightdom attr was removed a long time ago. That said, Polymer 0.8 will have an option to create elements without shadow dom.


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.

Miguelangel Fernandez

unread,
Feb 20, 2015, 7:10:53 AM2/20/15
to Eric Bidelman, polym...@googlegroups.com, javier.ve...@gmail.com
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.
Reply all
Reply to author
Forward
0 new messages