重要外链汇总

更改

音乐插件在移动端的拖动问题修复

问题出在没有绑定touch事件
附修改后插件拖动代码

var $DOC = $(document);

// 拖动逻辑的封装
function handleDrag(e) {
    e.preventDefault();
    e.stopPropagation();

    // 阻止文本选中
    $DOC.bind("selectstart", function () {
        return false;
    });

    var $moveTarget = $('#musicMouseDrag');
    $moveTarget.css('border', '1px dashed grey');

    // 计算初始坐标偏移量
    var pageX = e.type === 'touchstart' ? e.originalEvent.touches[0].pageX : e.pageX;
    var pageY = e.type === 'touchstart' ? e.originalEvent.touches[0].pageY : e.pageY;
    var div_x = pageX - $moveTarget.offset().left;
    var div_y = pageY - $moveTarget.offset().top;

    // 绑定移动事件
    $DOC.on('mousemove touchmove', function (e) {
        e.preventDefault();//阻止默认事件
        e.stopPropagation();//阻止事件冒泡

        // 更新坐标
        pageX = e.type === 'touchmove' ? e.originalEvent.touches[0].pageX : e.pageX;
        pageY = e.type === 'touchmove' ? e.originalEvent.touches[0].pageY : e.pageY;

        var targetX = pageX - div_x;
        var targetY = pageY - div_y;

        // 限制在屏幕内
        targetX = Math.max(0, Math.min(targetX, window.innerWidth - $moveTarget.outerWidth()));
        targetY = Math.max(0, Math.min(targetY, window.innerHeight - $moveTarget.outerHeight()));

        $moveTarget.css({'left': targetX + 'px', 'top': targetY + 'px', 'bottom': 'auto', 'right': 'auto'});
    }).on('mouseup touchend', function () {
        $DOC.unbind("selectstart");
        $DOC.off('mousemove touchmove');
        $DOC.off('mouseup touchend');
        $moveTarget.css('border', 'none');
    });
}

// 通过设备判断绑定不同拖动事件
if (!('ontouchstart' in window)) {
    $('.musicDragArea').on('mousedown', handleDrag);
} else {
    $('.musicDragArea').on('touchstart', handleDrag);
}

---

此方悬停