移动端拖拽js,在电脑端是不好用的啊,只能在移动端用,电脑端插件比较多

不按规矩来了

先上代码吧

/*
 *author:kingflag
 *mailbox:1362168862@qq.com
 *2016-09-08
 */
$(function() {

    /*移动端绑定事件*/
    FastClick.attach(document.body);

    var actionList = {
        //测试
        'test1': function(self) {
            test1(self)
        }

    }

    function setMove() {
        var element = $('#floatdiv');
        var ty = 0;
       /* console.log($(window).height());
        console.log($(window).width());这是获取可见范围的宽度个高度*/
        element.on("touchmove", function(e) {
            e.preventDefault();
            var offset = $(this).offset();
            var divwidth=$('#floatdiv').width();//获取div宽度
            var divheight=$('#floatdiv').height();//获取div高度
            var x = (e.originalEvent.changedTouches[0].clientX - divwidth/2 );//拖拽div时使触摸点在div中间,下面的和这个一样,只是一个控制X轴,一个控制Y轴
            var y = (e.originalEvent.changedTouches[0].clientY - divheight/2 );
            ty = e.originalEvent.changedTouches[0].clientY;
            tl = e.originalEvent.changedTouches[0].clientY;
            if (offset.top <= $(window).height() - 53 || offset.left <= $(window).width() - offset.width) {
                element.css('top', y + 'px');
                element.css('left', x + 'px');
            } else {
                element.css('top', y + 'px');
                element.css('left', x + 'px');
            }
            e.stopPropagation();
            return false;
        });
        element.on('touchend', function(e) { //touchend是触摸后执行的动作,我没做太多调整,有可能拖拽的div移出屏幕可见范围,移动的主要功能是touchmove
            var offset = $(this).offset();   //touch是div超出可见范围后执行的动作,可以将div拉回可见范围
            var h = ty + offset.height;
            var l = offset.left + offset.width;
            if (h > $(window).height()) {
                var th = $(window).height() - offset.height - 100;
                element.css('top', th + 'px');
            } else if (offset.top < 0) {
                element.css('top', '50px');
            }
            if (offset.left < 0) {
                element.css('left', '0px');
            } else if (l > $(window).width()) {
                element.css('left', $(window).width() - offset.width + 'px');
            }
        });
    }

    setMove();



    var $body = $(document)


    /*绑定click事件*/
    $body.on('click', '[data-action]', function() {
        var actionName = $(this).data('action')
        var action = actionList[actionName]
        var self = this
        if ($.isFunction(action))
            action(self)
    })

    function test1(self) {

        console.log("测试");
    }



})

这部分是根据APIcloud改来直接用的,网上找一些插件,好像都不太能实现我需要的功能,我就找了这一部分代码改了一下,现在能拖动div了,但window.location.herf是不能跳转的,这个不知道为什么,需要跳转的在div外层包一个a超链接

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
针对移动端手指放大缩小操作,我们可以使用hammer.js插件实现。具体代码如下: 1. 首先,在HTML中引入hammer.js插件以及自己编写的JS文件: ```html <script src="path/to/hammer.js"></script> <script src="path/to/your/js/file.js"></script> ``` 2. 在JS文件中,我们先初始化一个hammer对象,然后分别定义缩放和拖拽的事件: ```javascript // 初始化hammer对象 var hammer = new Hammer(document.getElementById("target")); // 缩放事件 hammer.get("pinch").set({ enable: true }); hammer.on("pinch", function (e) { // 缩放代码 }); // 拖拽事件 hammer.get("pan").set({ enable: true, direction: Hammer.DIRECTION_ALL }); hammer.on("pan", function (e) { // 拖拽代码 }); ``` 3. 在缩放事件中,我们可以通过e.scale来获取当前缩放比例,然后根据需要进行缩放操作: ```javascript hammer.on("pinch", function (e) { var scale = e.scale; // 进行缩放操作 // 可以通过设置元素的transform属性来实现缩放 }); ``` 4. 在拖拽事件中,我们可以通过e.deltaX和e.deltaY来获取当前拖拽的距离,然后根据需要进行移动操作: ```javascript hammer.on("pan", function (e) { var deltaX = e.deltaX; var deltaY = e.deltaY; // 进行移动操作 // 可以通过设置元素的transform属性来实现移动 }); ``` 综上所述,以上就是控制手指缩放和移动的代码实现。需要注意的是,缩放和移动的具体实现方式需要根据具体需求进行调整。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值