jQueryUIのドラッグ可能なモバイルを解決すると問題をドラッグできません

Solve Jquery Ui Draggable Mobile Can Not Drag Problem

コードに直接
jquery.ui.touch-パンチダウンロードリンク： https://github.com/furf/jquery-ui-touch-punch

例html + css

jQuery UI Draggable + Sort (Sortable) ul { list-style-type: none margin: 0 padding: 0 margin-bottom: 10px } li { margin: 5px padding: 5px width: 150px }

• Please drag me

• Item 1
• Item 2
• Item 3
• Item 4
• Item 5

$(function () { $('#sortable').sortable({ revert: true }) $('#draggable').draggable({ connectToSortable: '#sortable', helper: 'clone', revert: 'invalid' }) $('ul, li').disableSelection() }) var touchValue = { x: 5, y: 5, sx: 0, sy: 0, ex: 0, ey: 0 } //initialize the touch values window.addEventListener('touchstart', function () window.event touchValue.sx = event.targetTouches[0].pageX touchValue.sy = event.targetTouches[0].pageY touchValue.ex = touchValue.sx touchValue.ey = touchValue.sy ) window.addEventListener('touchmove', function (event) var event = event ) window.addEventListener('touchend', function (event) )

注意してください

Event listeners for window.addEventListener may override other sliding events such as scroll events In this case, you can individually drag and drop the div that needs to be dragged. code show as below var touchValue = { x: 5, y: 5, sx: 0, sy: 0, ex: 0, ey: 0 } var timeLineDrag = document.getElementById('time-line') timeLineDrag.addEventListener('touchstart', function () var event = event , { passive: false }) timeLineDrag.addEventListener('touchmove', function (event) , { passive: false }) timeLineDrag.addEventListener('touchend', function (event) window.event var changeX = touchValue.ex - touchValue.sx var changeY = touchValue.ey - touchValue.sy window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty() , { passive: false })