javascript - 如何在移动设备中制作可拖动对象

Question

我有一些 HTML 元素，它们提供了由 HTML、CSS 和 Javascript 完成的拖动前后元素

现在我试图让它与支持触摸的设备一起工作，但我的处理程序没有在移动设备上运行

HTML:

CSS:

#progress {
    cursor: pointer;
    width: 42%;
    float: left; padding-top:5px;
}
#progress #progress_box {
    float: left;
    width: 100%;
    height: 14px;
    background: rgba(110,116,126,1);
    background: -moz-linear-gradient(top, rgba(110,116,126,1) 0%, rgba(110,116,126,1) 23%, rgba(110,116,126,1) 50%, rgba(87,94,106,1) 50%, rgba(87,94,106,1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(110,116,126,1)), color-stop(23%, rgba(110,116,126,1)), color-stop(50%, rgba(110,116,126,1)), color-stop(50%, rgba(87,94,106,1)), color-stop(100%, rgba(87,94,106,1)));
    background: -webkit-linear-gradient(top, rgba(110,116,126,1) 0%, rgba(110,116,126,1) 23%, rgba(110,116,126,1) 50%, rgba(87,94,106,1) 50%, rgba(87,94,106,1) 100%);
    background: -o-linear-gradient(top, rgba(110,116,126,1) 0%, rgba(110,116,126,1) 23%, rgba(110,116,126,1) 50%, rgba(87,94,106,1) 50%, rgba(87,94,106,1) 100%);
    background: -ms-linear-gradient(top, rgba(110,116,126,1) 0%, rgba(110,116,126,1) 23%, rgba(110,116,126,1) 50%, rgba(87,94,106,1) 50%, rgba(87,94,106,1) 100%);
    background: linear-gradient(to bottom, rgba(110,116,126,1) 0%, rgba(110,116,126,1) 23%, rgba(110,116,126,1) 50%, rgba(87,94,106,1) 50%, rgba(87,94,106,1) 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6e747e', endColorstr='#575e6a', GradientType=0 );
    margin: 2px 0 0 5px;
    xpadding: 2px;
    overflow: hidden;
}

Js:

  var rangesliderContainer = document.createElement('div'),
            selectionBar = document.createElement('div'),
            leftHandler = document.createElement('div'),
            rightHandler = document.createElement('div');

 rangesliderContainer.style.position = 'relative';
        rangesliderContainer.style.top = '-1em';
        rangesliderContainer.style.height = '100%';
        rangesliderContainer.id='rangeSlider';
        rangesliderContainer.setAttribute('data-myval','0');

        selectionBar.style.height = '60%';
        selectionBar.style.position = 'absolute';
        selectionBar.style.left = '0%';
        selectionBar.style.right = '0%';
        selectionBar.style.backgroundColor = '#f3752b';
        selectionBar.style.opacity = '0.8';

        leftHandler.className = 'left';
        leftHandler.style.position = 'relative';
        leftHandler.style.width = '0.3em';
        leftHandler.style.height = '100%';
        leftHandler.style.backgroundColor = '#fff';
        //leftHandler.style.left = '-0.5em';
        leftHandler.style.height='2em';
         leftHandler.style.backgroundColor = '#f3752b';

        rightHandler.className = 'right';
        rightHandler.style.position = 'absolute';
        rightHandler.style.width = '0.3em';
        rightHandler.style.height = '100%';
        rightHandler.style.backgroundColor = '#fff';
        rightHandler.style.right = '-0.5em';
        rightHandler.style.top = '0';
        rightHandler.style.height='2em';
        rightHandler.style.backgroundColor = '#f3752b';

     rangesliderContainer.appendChild(selectionBar);
        selectionBar.appendChild(leftHandler);
        selectionBar.appendChild(rightHandler);

$('.vjs-progress-holder').append(rangesliderContainer);

 var onMouseMove = function (event) {
                var totalWidth = rangesliderContainer.offsetWidth;
                var leftEdge = rangesliderContainer.getBoundingClientRect().left;
                var position = event.pageX;

                var x = event.pageX - $('#rangeSlider').offset().left;
                //sometime x goes to negative so added Math.max
                var percent = Math.max(0, x / $('#rangeSlider').width());
               // var startTime = secondsToHms(percent * player.duration) ;
               // var endTime = secondsToHms(percent * player.duration) ;


                var currentLeft = parseFloat(selectionBar.style.left),
                    currentRight = parseFloat(selectionBar.style.right),
                    newLeft = Math.min(100, (Math.max(0, position - leftEdge) / totalWidth * 100)),
                    newRight = Math.min(100, (100 - (Math.min(totalWidth, position - leftEdge) / totalWidth * 100)));

                if (activeHandler.className === 'left') {
                    if (newLeft > 100 - currentRight) {
                        // activeHandler = activeHandler === leftHandler ? rightHandler : leftHandler;
                        // selectionBar.style.right = newRight + '%';
                        selectionBar.style.left = (100 - currentRight) + '%';
                         leftSpan.innerHTML =  startTime;
                    } else {
                        selectionBar.style.left = newLeft + '%';
                         leftSpan.innerHTML =  startTime;
                    }
                } else {
                    if (100 - newRight < currentLeft) {
                        // activeHandler = activeHandler === leftHandler ? rightHandler : leftHandler;
                        // selectionBar.style.left = newLeft + '%';
                        selectionBar.style.right = (100 - currentLeft) + '%';
                        rightSpan.innerHTML =  endTime;
                    } else {
                        selectionBar.style.right = newRight + '%';
                        rightSpan.innerHTML =  endTime;
                    }
                }
            };


var onMouseUp = function () {
                //alert('dfdff');
                document.removeEventListener('mousemove', onMouseMove);
                document.removeEventListener('mouseup', onMouseUp);  

                 leftHandler.addEventListener('touchmove', onMouseMove);
                leftHandler.addEventListener('touchend', onMouseUp);

                 rightHandler.addEventListener('touchmove', onMouseMove);
                rightHandler.addEventListener('touchend', onMouseUp);
            };

            var onMouseDown = function () {
                activeHandler = this;
               // alert('dfdff');
                document.addEventListener('mousemove', onMouseMove);
                document.addEventListener('mouseup', onMouseUp);


                leftHandler.addEventListener('touchmove', onMouseMove);
                leftHandler.addEventListener('touchend', onMouseUp);

                 rightHandler.addEventListener('touchmove', onMouseMove);
                rightHandler.addEventListener('touchend', onMouseUp);
            };


            leftHandler.addEventListener('mousedown', onMouseDown);
            rightHandler.addEventListener('mousedown', onMouseDown);

为我的触摸和桌面浏览器的处理程序添加了事件，在桌面上工作正常但不能在触摸设备上工作

leftHandler.addEventListener('touchmove', onMouseMove);
leftHandler.addEventListener('touchend', onMouseUp);

rightHandler.addEventListener('touchmove', onMouseMove);
rightHandler.addEventListener('touchend', onMouseUp);

有人可以帮帮我吗？

fiddle :Fiddle

Answer 1

在触摸屏上与 HTML5 相关的最佳解决方案是使用 jQuery UI Touch Punch .您可以在此站点上找到非常好的工作示例，这些示例在桌面和移动设备上都运行良好。

Draggable Objects Example

Droppable Objects Example

旁注:请不要reinvent the wheel .根据我的经验，使用强大的第 3 方库/组件(例如 jQuery，它是纯粹的力量)，开发过程会更快、更容易、更多……更多……。