• 欢迎访问开心洋葱网站,在线教程,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站,欢迎加入开心洋葱 QQ群
  • 为方便开心洋葱网用户,开心洋葱官网已经开启复制功能!
  • 欢迎访问开心洋葱网站,手机也能访问哦~欢迎加入开心洋葱多维思维学习平台 QQ群
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏开心洋葱吧~~~~~~~~~~~~~!
  • 由于近期流量激增,小站的ECS没能经的起亲们的访问,本站依然没有盈利,如果各位看如果觉着文字不错,还请看官给小站打个赏~~~~~~~~~~~~~!

jQuery拖拽效果插件代码

PHP 水墨上仙 2370次浏览

下面的jQuery插件允许你通过鼠标右键点击拖动overflow的元素,这个插件可以在移动设备上运行

/**
* jQuery Drag and Scroll
*
* Copyright (c) 2012 Ryan Naddy (ryannaddy.com)
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
*/

(function($){
    var down = false;
    var prevX = 0;
    var prevY = 0;
    var x = 0;
    var y = 0;
    var px = 0;
    var py = 0;
    var lastPX = -1;
    var lastPY = -1;
    var $target = null;
    var $me = null;
    var $selector = "";
    var settings = {
        mouseButton: 3,
        context: false,
        selectText: false
    };
    $.fn.dragScroll = function(options){
        settings = $.extend(settings, options);
        $selector = $(this).selector;
        $(this).contextmenu(function(){
            return false;
        }).bind("mousedown touchstart", function(e){
            $me = $(this);
            e = event.touches ? event.touches[0] : e;
            $target = $(e.target);
            $target = $target.closest($selector);
            if(settings.viewPort){
                if(!settings.context){
                    $me.contextmenu(function(){
                        return false;
                    });
                }
            }
            if(!settings.selectText){
                $me.attr('unselectable', 'on').css('user-select', 'none').on('selectstart', false);
            }
            $me = $me.closest($selector);
            if($target && $me.attr("id") != $target.attr("id")){
                return false;
            }
            if(e.which == settings.mouseButton || event.touches){
                $me.css("cursor", "move");
                down = true;
            }
            px = $me.scrollLeft();
            py = $me.scrollTop();
            x = px + e.pageX;
            y = py + e.pageY;
            prevX = x;
            prevY = y;
            return true;
        }).bind("mouseup touchend", function(e){
            $me = $(this);
            e = event.touches ? event.touches[0] : e;
            $me.css("cursor", "auto");
            down = false;
        }).bind("mousemove touchmove", function(e){
            $me = $(this);
            $me = $me.closest($selector);
            e = event.touches ? event.touches[0] : e;
            if((e.which == settings.mouseButton || event.touches) && down){
                if(event.touches){
                    event.preventDefault();
                }
                if($target && $me.attr("id") != $target.attr("id")){
                    return false;
                }
                $me.css("cursor", "move");
                px = $me.scrollLeft();
                py = $me.scrollTop();
                x = px + e.pageX;
                y = py + e.pageY;
                $me.scrollLeft(px + (-(x - prevX)));
                $me.scrollTop(py + (-(y - prevY)));

                prevX = x - (x - prevX);
                prevY = y - (y - prevY);
                if(lastPX == px)
                    prevX = x;
                if(lastPY == py)
                    prevY = y;
                lastPX = px;
                lastPY = py;
            }
            return true;
        });
        return this;
    }
})(jQuery);


开心洋葱 , 版权所有丨如未注明 , 均为原创丨未经授权请勿修改 , 转载请注明jQuery拖拽效果插件代码
喜欢 (0)
加载中……