JSはコントロールのドラッグ/ドラッグを実現する

3061 ワード
Webフロントエンド Javascript HTML 5
次に、コントロールドラッグを実装する完全なコードを示します.
(function ($) {
    var move = false;           //             
    var dragOffsetX = 0;        //        X   
    var dragOffsetY = 0;        //        Y   
    var dragObj = null;         //        

    $.fn.mydrag = function () {
        dragObj = this;

        this.mousedown(function (e) {
            move = true;

            //              ，            
            dragOffsetX = e.clientX - e.currentTarget.offsetLeft;
            dragOffsetY = e.clientY - e.currentTarget.offsetTop;
        });

        $(document).mousemove(function (e) {
            if (move) {
                //          ，          
                var newX = e.clientX - dragOffsetX;
                var newY = e.clientY - dragOffsetY;

                //    ，document.documentElement.clientWidth：        document.documentElement.clientHeight：      
                newX = newX < 0 ? 0 : newX;
                newY = newY < 0 ? 0 : newY;
                newX = newX > (document.documentElement.clientWidth - dragObj.outerWidth()) ? (document.documentElement.clientWidth - dragObj.outerWidth()) : newX;
                newY = newY > (document.documentElement.clientHeight - dragObj.outerHeight()) ? (document.documentElement.clientHeight - dragObj.outerHeight()) : newY;

                //            
                dragObj.css({ left: newX + "px", top: newY + "px", position: 'absolute' });
            }
        });

        $(document).mouseup(function () {
            if (move) {
                move = false;
            }
        });
    };
})(jQuery);

使用方法:
1、jsファイルを作成し、上記のコードを貼り付けます.
2、このjsファイルをページに導入する.
3、呼び出し方法:$("#id").mydrag();
あるいは、このプラグインを下のプラグインに置き換えることもできます.使い方はまったく同じで、効果は少し違います.自分で体得することができます.
(function ($) {
    var dragOffsetX = 0;        //        X   
    var dragOffsetY = 0;        //        Y   

    $.fn.mydrag = function () {
        this.mousedown(function (e) {
            //              ，            
            dragOffsetX = e.clientX - e.currentTarget.offsetLeft;
            dragOffsetY = e.clientY - e.currentTarget.offsetTop;
        });

        this[0].ondragend = this[0].ondrag = function (e) {
            //          ，          
            var newX = e.clientX - dragOffsetX;
            var newY = e.clientY - dragOffsetY;

            //    ，document.documentElement.clientWidth：        document.documentElement.clientHeight：      
            newX = newX < 0 ? 0 : newX;
            newY = newY < 0 ? 0 : newY;
            newX = newX > (document.documentElement.clientWidth - this.width) ? (document.documentElement.clientWidth - this.width) : newX;
            newY = newY > (document.documentElement.clientHeight - this.height) ? (document.documentElement.clientHeight - this.height) : newY;

            //            
            $(this).css({ left: newX + "px", top: newY + "px", position: 'absolute' });
        };
    };
})(jQuery);
Uncaught SyntaxError: Cannot use import statement outside a module
jqueryはQRコードを生成する