移动端实现图标拖拽效果

weixin_44703304

于 2019-06-05 17:09:50 发布

阅读量2k

点赞数 2

分类专栏： JavaScript 文章标签：拖拽拖动图标可移动图标可拖动图标

本文链接：https://blog.youkuaiyun.com/weixin_44703304/article/details/90905590

版权

本文介绍了如何在移动端实现类似苹果手机HOME键的图标拖拽功能。通过js代码，可以创建一个可拖动的图标按钮，让其在页面上自由移动。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

做一个像苹果手机桌面的HOME键一样的图标，实现图标按钮在页面上可拖拽效果。js代码如下：

window.onload = function () {
    var oDiv = document.getElementById('moveIcon');

    var disX, moveX, L, T, starX, starY, starXEnd, starYEnd;

    oDiv.addEventListener('touchstart', function (e) {
        //e.preventDefault();

        disX = e.touches[0].clientX - this.offsetLeft;
        disY = e.touches[0].clientY - this.offsetTop;
        starX = e.touches[0].clientX;
        starY = e.touches[0].clientY;
    });
    oDiv.addEventListener('touchmove', function (e) {
        L = e.touches[0].clientX - disX;
        T = e.touches[0].clientY - disY;
        starXEnd = e.touches[0].clientX - starX;
        starYEnd = e.touches[0].clientY - starY;
        //console.log(L);
        if (L < 0) {
            L = 0;
        } else if (L > document.documentElement.clientWidth - this.offsetWidth) {
            L = document.documentElem

最低0.47元/天解锁文章