マウスドラッグ要素のJavaScript実装例 code_javascriptスキル

1. はじめに

マウスドラッグ要素を実装する最初の目的は、ページ上で多数の小さな点をドラッグして位置を固定し、HTMLをコピーしてページの開発コードに貼り付けることです。これはそのような機能であり、それを実現しています。あちこちでやりましたが、jQuery.fn.draggable プラグインを使用するしかありませんでした。いくつかの情報や他の人のアイデアを参考にして、今日はこのドラッグ機能を完成させました。実装時

2. デザインアイデア

マウスダウンイベントをドラッグ要素にバインドし、マウス移動イベントとマウスアップイベントをドキュメントオブジェクトにバインドします。
なぜ 3 つのイベントすべてをドラッグ要素にバインドしないのでしょうか。これは、マウス移動イベントとポップアップイベントのハンドラーが原因です。マウスの動きが速すぎると実行されません

コードをコピー コードは次のとおりです。

$target.bind('mousedown', fn);

$(document)
.bind('mousemove', fn)
.bind('mouseup', fn);

3. ソースコード実装の詳細

実装のソース コードには注目すべき点が数多くあります:

1. まず、マウス プレス イベントで、要素をクリックしてドラッグすると、領域のテキストが選択されることがあります。これは、次のとおりです。

コードをコピー コードは次のとおりです:

// エリア テキストが選択されないようにするchrome Firefox ie9
e.preventDefault();
// Firefox ie9 の場合 || ie9
window.getSelection より小さい ? window.getSelection().removeAllRanges() : document.selection.empty();

2. ドラッグする要素が画像 (img タグ) で、マウスが画像を少しだけドラッグすると、小さな禁止プロンプトが表示されます。つまり、画像はもうドラッグできません。

これはブラウザーのメッセージです。デフォルトの動作なので、ブラウザのデフォルトの動作をブロックするだけです

コードをコピー コードは次のとおりです:

e.preventDefault();

3. 境界に関する問題 (ドラッグ範囲の処理)

最初に実装されたコードは次のとおりです:

コードをコピー コードは次のとおりです:

// x、y は値を表します要素をドラッグすることで設定されます。左、上の値、およびlimitObjは、テスト中に問題が発見されました。
// ドラッグ処理中に、ドラッグしているオブジェクトを直接近づけることができない場合があります。境界線
if ( x >= limitObj._left && x $target.css({ left: x 'px' });
}
if ( y >= limitObj._top && y <= limitObj._bottom ) {
$target.css({ top: y 'px' });
}

さらに考えてみると、なぜ上記の問題が発生するのでしょうか? その理由は、変数 x がlimitObj._left より小さいか、limitObj._right より大きい可能性があるためです。

したがって、コードには次のことが必要です。次のように処理されます:

コードをコピー コードは次のとおりです:

if (x x = limitObj._left;
}
if (x > limitObj._right) {
x = limitObj._right;
}
if (y < limitObj._right) _top) {
y = limitObj._top;
}
if (y > limitObj._bottom) {
y = limitObj._bottom;
}
$target.css( { 左: x 'px'、上: y 'px' });

最終的にこの問題は解決されましたが、cloudgamer はより良い記述方法を提供しました:

コードをコピー コードは次のとおりです。

$target.css({
左: Math .max( Math.min(x, limitObj._right), limitObj._left) 'px',
上: Math.max( Math.min(y, limitObj._bottom), limitObj._top) ' px'
});

完全なプログラム ソース コード:

コードをコピー コードは次のとおりです:

$.fn.extend({
    /**
     *   Autor: 博客园华子yjh 2014/02/21
     */
    drag: function(options) {
        var dragStart, dragMove, dragEnd,
            $boundaryElem, limitObj;

        function _initOptions() {
            var noop = function(){}, defaultOptions;

            defaultOptions = { // 默认配置项
                boundaryElem: 'body' // 边界容器
            };
            options = $.extend( defaultOptions, options || {} );
            $boundaryElem = $(options.boundaryElem);

            dragStart = options.dragStart || noop,
            dragMove = options.dragMove || noop,
            dragEnd = options.dragEnd || noop;
        }

        function _drag(e) {
            var clientX, clientY, offsetLeft, offsetTop,
                $target = $(this), self = this;

            limitObj = {
                _left: 0,
                _top: 0,
                _right: ($boundaryElem.innerWidth() || $(window).width()) - $target.outerWidth(),
                _bottom: ($boundaryElem.innerHeight() || $(window).height()) - $target.outerHeight()
            };

            // 记录鼠标按下时的位置及拖动元素的相对位置
            clientX = e.clientX;
            clientY = e.clientY;
            offsetLeft = this.offsetLeft;
            offsetTop = this.offsetTop;

            dragStart.apply(this, arguments);
            $(document).bind('mousemove', moveHandle)
                        .bind('mouseup', upHandle);

            // 鼠标移动事件处理
            function moveHandle(e) {
                var x = e.clientX - clientX + offsetLeft;
                var y = e.clientY - clientY + offsetTop;

                $target.css({
                    left: Math.max( Math.min(x, limitObj._right),  limitObj._left) + 'px',
                    top: Math.max( Math.min(y, limitObj._bottom),  limitObj._top) + 'px'
                });

ragMove.apply(self, argument);
// 浏览器默认行範囲(ネズミ标在拖動图片一小段距離、会出一禁止小提案、すなわち:图片は再実行できません)
e.preventDefault();
);

}

}

_initOptions(); // 構成オブジェクトを初期化します

$(this)
.css({position: 'absolute' })

.each(function(){

$(this).bind('mousedown', function(e){

_drag.apply(this, [e]);

// ie9 未満の場合
window.getSelection? window.getSelection(). AllRanges(): document.selection.empty( ); 🎜> });



インスタンス呼び出し:





コードをコピー


コードは次のとおりです:

// インスタンスの呼び出し

(関数(){

$('.drag-elem').drag({

borderElem: '#boundary',ragStart: function(){ $(this).html('< ;span> ドラッグの準備をします').css({ zIndex: 2 }).siblings().css({ zIndex: 1 }); }, ragMove: function(){ var pos = $ (this).position(); ; },

ragEnd : function(){

$(this).html('ドラッグ終了 '); }) ;
}());