View Full Version : [OPEN-150] Scrollable sortable

19 Jul 2010, 12:29 PM
If the sortable elements overflow the viewable space, how do you make it auto-scroll as you drag elements out of the viewable area? For an example of what I want, in iphone os go to settings>general>international>keyboards, add a bunch of keyboards, then click edit and sort an item out of the viewable area, it auto-scrolls as you sort.

Ext.setup({onReady: function () {
var s = "";
for (var x = 0; x < 200; x++)
s += "<div><span style='float:right;'>DRAG</span>Item" + x + "</div>";
new Ext.Panel({ fullscreen: true, scroll: 'vertical', html: "<div id='sortable'>" + s + "</div>" });
new Ext.util.Sortable('sortable', { direction: 'vertical', constrain: true, itemSelector: 'div', handleSelector: 'span' });

19 Jul 2010, 10:32 PM
Currently there's no built in way to do it. The best place to include it would be inside Draggable, so it detects if the position is within the scrolling threshold (say, 10px from the edge or whatever you set it to) then scrolls in the appropriate direction.

20 Jul 2010, 4:18 AM
This functionality seems like it should be baked in... turn the iphone sideways on the out of the box sortable example and you can no longer see the bottom of the list. Is it possible to move this to the bugs forum and track it as such?

20 Jul 2010, 5:22 AM
I've found the example code to do the pinch. I've also found the example code to enable drag on an element. But what is the easiest way to do these together?

Also, is there any way to allow the draggable element to be dragged off screen? In other words, not be limited by the window / viewport edge?

Jamie Avins
20 Jul 2010, 8:27 AM
I'll get it in Trac and move the thread over.

20 Jul 2010, 8:30 AM
Just a note, you may want to consider fixing this in tandem with bug 144 (http://www.sencha.com/forum/showthread.php?104654-OPEN-144-Scrolling-a-sortable-breaks)

23 Jul 2010, 6:31 AM
The draggable element going off the screen is covered in bug 150, you can track it in the bugs forum, search for "[OPEN-150] Scrollable sortable".

Unfortunately, pinch and drag cannot be concurrently combined. This is because drag overrides the touchmove event and stops it from executing up the chain, where the pinch logic lives. However, I did discover a bug in that disabling the draggable only detaches the tapEvent, not the touchmove or touchend events. In the below example, you can drag the box, clicking Broken disables the drag but you still cannot pinch resize the box. Click Works and the drag is correctly disabled and you can pinch-resize the box. Once this bug has been corrected you can disable the draggable and pinch will once again fire. Sencha team, please move this thread to the bugs forum and add a Trac ticket for the incomplete disable dragging method.

<link href="/css/ext-touch.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/js/sencha/ext-touch-debug.js"></script>
<script type="text/javascript">
Ext.setup({ onReady: function () {
scope: { scale: 1 },
pinchstart: function () { this.startScale = this.scale; },
pinch: function (e, t) {
this.scale = e.scale * this.startScale;
t.style.webkitTransform = 'scale(' + this.scale + ')';
window.drag = new Ext.util.Draggable('panel');

function disableDrag() {
drag.el.un('touchmove', drag.onTouchMove, drag);
drag.el.un('touchend', drag.onTouchEnd, drag);
<div id="panel" style="background-color: #ddd; width: 200px; height: 200px;
position: absolute; left: 100px;">
<a href="javascript:drag.disable();">Broken</a><br /><br />
<a href="javascript:disableDrag();">Works</a>

23 Jul 2010, 6:51 AM
it wasn't perfect but i managed to get some similar functionality by setting the container panel to scrollable: both, and put the pinch event code on the element inside. It's not exactly perfect, because if you zoom too much then you push the limits of the scroll...

But yeah the problem still exists. Thanks!