1. 程式人生 > >移動端拖拽js,在電腦端是不好用的啊,只能在移動端用,電腦端外掛比較多

移動端拖拽js,在電腦端是不好用的啊,只能在移動端用,電腦端外掛比較多

不按規矩來了

先上程式碼吧

/*
 *author:kingflag
 *mailbox:[email protected]
 *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超連結