마우스 드래그 요소 예제 code_javascript 기술의 JavaScript 구현

1. 서문

마우스 드래그 요소를 구현하는 첫 번째 목적은 페이지에서 여러 개의 작은 점을 드래그하여 위치를 고정한 다음 HTML을 복사하여 페이지의 개발 코드에 붙여넣는 것입니다. 여기저기서 많이 해봤지만 어쩔 수 없이 jQuery.fn.draggable 플러그인을 사용하게 되었습니다. 몇 가지 정보와 다른 사람들의 아이디어를 접한 후 마침내 오늘 이 드래그 기능을 완성해 보겠습니다. 구현 시

2. 디자인 아이디어

마우스 다운 이벤트를 드래그 요소에 바인딩하고, 마우스 이동 및 마우스 업 이벤트를 문서 개체에 바인딩합니다.
세 가지 이벤트를 모두 드래그 요소에 바인딩하지 않는 이유는 마우스 이동 및 팝업 이벤트 핸들러 때문입니다. 마우스가 너무 빠르게 움직이면 실행되지 않습니다

코드 복사 코드는 다음과 같습니다.

$target.bind('mousedown', fn)

$(문서)
.bind('mousemove', fn)
.bind('mouseup', fn);

3. 소스코드 구현 내용

구현 소스 코드에는 주목할 만한 사항이 많이 있습니다.

1. 먼저, 마우스 누름 이벤트에서 요소를 클릭하고 드래그하면 해당 영역 텍스트가 선택될 수 있습니다. 해결 방법은 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

// 영역 텍스트가 선택되지 않도록 방지 chrome firefox ie9
e.preventDefault();
// for firefox ie9 || ie9
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();

2. 드래그하는 요소가 사진(img 태그)이고 마우스가 사진을 짧은 거리로 드래그하면 다음과 같은 작은 금지 프롬프트가 나타납니다. 즉, 사진을 더 이상 드래그할 수 없습니다.

이것은 브라우저의 내용입니다. 기본 동작이므로 브라우저 기본 동작을 차단하세요

코드 복사 코드는 다음과 같습니다.

e.preventDefault();

3. 경계(드래그 범위 처리)에 관한 문제

처음에 구현한 코드는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

// x, y는 값을 나타냅니다. ​왼쪽, 위쪽 값 및 LimitObj는 드래그 영역 개체입니다. 문제는 테스트 중에 발견되었습니다.
// 드래그 프로세스 중에 드래그 개체가 직접 가까이에 있을 수 없는 경우가 있습니다. 경계
if ( x >=limitObj._left && x <=limitObj._right ) {

$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 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'
                });

               dragMove.apply(self, 인수);
               // 阻止浏览器默认行为(鼠标在拖动图一小段距离，会现一一禁止能再拖动)
               e.preventDefault();
                                                                                                             >

_initOptions(); // 구성 객체 초기화

$(this)
.css({ position: 'absolute' })
.each(function(){
$(this).bind('mousedown', function(e){
          _drag.apply(this, [e]);

                                                                                                                      // ie9

미만의 경우              window.getSelection().                      AllRanges(): document.selection.empty( );                                       🎜> });

인스턴스 통화:





코드 복사


코드는 다음과 같습니다.


// 인스턴스 호출

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

boundaryElem: '#boundary',

dragStart: function(){

$(this).html('< ;span> 드래그 준비').css({ zIndex: 2 }).siblings().css({ zIndex: 1 });

    },     dragMove: function(){ var pos = $ (this).position(); }, dragEnd : function(){ $(this).html('Drag end '); }) ;}());