DRAGGABLE - SCROLL DIV - TOUCHSTART REPLACEMENT

http://stackoverflow.com/questions/11983805/drag-drop-on-ipad-web-app-while-remaining-scroll-functionality

HTML

<html>
<head>
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.0/jquery-ui.min.js"></script>
</head>
<body>
 <ul id="scroll_drag" class="is-scrollable">
     <li  draggable=true>Element 1</li>
     <li  draggable=true>Element 2</li>
     <li  draggable=true>Element 3</li>
     <li  draggable=true>Element 4</li>
     <li draggable=true>Element 5</li>
     <li draggable=true>Element 6</li>
     <li draggable=true>Element 7</li>
     <li draggable=true>Element 8</li>
     <li draggable=true>Element 9</li>
     <li draggable=true>Element 10</li>
     <li draggable=true>Element 11</li>
     <li draggable=true>Element 12</li>
     <li draggable=true>Element 13</li>
     <li draggable=true>Element 14</li>
     <li draggable=true>Element 15</li>
     <li draggable=true>Element 16</li>
     <li draggable=true>Element 17</li>
     <li draggable=true>Element 18</li>
     <li draggable=true>Element 19</li>
     <li draggable=true>Element 20</li>
     <li draggable=true>Element 21</li>
     <li draggable=true>Element 22</li>
     <li draggable=true>Element 23</li>
     <li draggable=true>Element 24</li>
     <li draggable=true>Element 25</li>
     <li draggable=true>Element 26</li>
     <li draggable=true>Element 27</li>
     <li draggable=true>Element 28</li>
     <li draggable=true>Element 29</li>
     <li draggable=true>Element 30</li>
     
   </ul>
</body>
</html>

CSS

#scroll_drag {
    height: 300px;
    overflow: scroll;
    margin-left: 50px;
}
ul li {
   padding: 5px;
   border: 1px solid red;
   margin: 3px;
   width: 100px;
   cursor: move;
}

JavaScript

function sortable(rootEl){
    var dragEl;
/*
    // Делаем всех детей перетаскиваемыми-make all children draggable
    [].slice.call(rootEl.children).forEach(function (itemEl){
        itemEl.draggable = true;
    });
    */

    // Фнукция отвечающая за сортировку-sort function
    function _onDragOver(evt){
        evt.preventDefault();
        evt.dataTransfer.dropEffect = 'move';

        var target = evt.target;
        if( target && target !== dragEl && target.nodeName == 'LI' ){
            // Сортируем-sort
            rootEl.insertBefore(dragEl, rootEl.children[0] !== target && target.nextSibling || target);
        }
    }

    // Окончание сортировки-end of sorting
    function _onDragEnd(evt){
        evt.preventDefault();

        dragEl.classList.remove('ghost');
        rootEl.removeEventListener('dragover', _onDragOver, false);
        rootEl.removeEventListener('dragend', _onDragEnd, false);

        // Сообщаем об окончании сортировки -inform abt end of sorting
        //onUpdate(dragEl);
    }

    // Начало сортировки-sorting start
    rootEl.addEventListener('dragstart', function (evt){
        dragEl = evt.target; // Запоминаем элемент который будет перемещать-remember the element that will move

        // Ограничиваем тип перетаскивания-limit the type of dragging
        evt.dataTransfer.effectAllowed = 'move';
        evt.dataTransfer.setData('Text', dragEl.textContent);

        // Пописываемся на события при dnd-writing about events with drag
        rootEl.addEventListener('dragover', _onDragOver, false);
        rootEl.addEventListener('dragend', _onDragEnd, false);

        setTimeout(function (){
            // Если выполнить данное действие без setTimeout, то-if u  perform the action without settimeout then
            // перетаскиваемый объект, будет иметь этот класс.-dragged object will have this class
            dragEl.classList.add('ghost');
        }, 0)
    }, false);
}

// Используем-we use the function
sortable(...