Problem with touch device and placeholder not moving
Closed this issue · 7 comments
I've got a problem on my Android Tablet and in Chrome with Device Mode set to Samsung Tablet, where the placeholder doesn't move when the drag element moves. In Desktop/mouse mode it works correctly.
From what I can see Sortable.identify() is setting dragging.currentTarget to the dragelement instead of the element at the drop point. So in Dragging.move() this.lastEntered !== this.currentTarget is never true and 'dragging:enter' never fires etc.
This doesn't happen with your Sortable demo.
I suspect it may be related to the markup I'm using which is:
<li class="active">
<a data-target="#ci64w33vx000m3f5xqj8x7lrz" data-kb_id="547501810000003f2f0000c4" data-user_name="nevf">
<span class="ui-tab-text">Marketing</span>
<span class="ui-tab-menu-dropdown icon-caret-down"></span>
</a>
</li>
and sortable is using:
el_ul.sortable( { placeholder_tag: 'li', handle: '.ui-tab-text', forcePlaceholderSize: true } )
I've been working on this for quite a while now without any great progress, other than tracking the above information down.
Thanks for reporting and already tracking this down! I think this is a Chrome bug. Because it does not take pointer-envents: none into account. For what ever device you choose. E.g. iPhone does not work in the emulator, too. But it works when testing it on a iPhone directly.
By Chrome you mean Chrome on Android. If it is a Chrome bug then why does your Sortable demo page work ok on both Android and the Chrome Windows Desktop in Android Device Mode?
The real question though is how do I get it to work.
I think it is a Bug in the Desktop Chrome Device Mode. Because the bug occurs regardless of what device is selected. For example, it also occurs for iOS devices. I've just tested it on real iOS hardware and it works fine.
@rkusa I'm seeing exactly the same problem on my Samsung Tablet S. I've removed the handle option and the problem still exists.
I don't think it is a problem with Chrome pointer events as the demo at https://css-tricks.com/almanac/properties/p/pointer-events/ & http://codepen.io/zakkain/pen/dseHt works on my Samsung Tablet S. Interestingly it doesn't work in Desktop Chrome Device Mode.
@rkusa Hi Markus, I've grabbed a copy of your sortable.html and started hacking on that until it showed the problem I'm seeing.
As soon as I switched from zepto.js to jquery.js the problems occurs. Note though that so far this is only on Desktop Chrome Device Mode. But I'd be 99% sure it is the same on my Samsung Tablet S.
I'll try digging some more to see if I can help further. My guess though is it maybe something to do with $.Event().
FYI I get the feeling this is a new problem as I'm fairly sure the previous version worked ok.