js 드래그 실현

코드 참조



 

    
    Document
    
   



    



 <span style="color: #000000;">
 utils </span>=<span style="color: #000000;"> {
    dragMov:</span><span style="color: #0000ff;">function</span><span style="color: #000000;">(dom){
        dom.style.cursor </span>= 'move'<span style="color: #000000;">;
        dom.onmousedown </span>= <span style="color: #0000ff;">function</span><span style="color: #000000;"> (ev) {
                </span><span style="color: #0000ff;">var</span> oEvent = ev ||<span style="color: #000000;"> event;
                </span><span style="color: #0000ff;">var</span> gapX = oEvent.clientX -<span style="color: #000000;"> dom.offsetLeft;
                </span><span style="color: #0000ff;">var</span> gapY = oEvent.clientY -<span style="color: #000000;"> dom.offsetTop;
                document.onmousemove </span>= <span style="color: #0000ff;">function</span><span style="color: #000000;"> (ev) {
                    </span><span style="color: #0000ff;">var</span> oEvent = ev ||<span style="color: #000000;"> event;
                    </span><span style="color: #008000;">//</span><span style="color: #008000;"> </span>
                    <span style="color: #0000ff;">var</span> l = oEvent.clientX -<span style="color: #000000;"> gapX;
                    </span><span style="color: #0000ff;">var</span> t = oEvent.clientY -<span style="color: #000000;"> gapY;
                    </span><span style="color: #0000ff;">var</span> r = document.documentElement.clientWidth -<span style="color: #000000;"> dom.offsetWidth;
                    </span><span style="color: #0000ff;">var</span> b = document.documentElement.clientHeight -<span style="color: #000000;"> dom.offsetHeight;
                    </span><span style="color: #0000ff;">if</span> (l < 0<span style="color: #000000;">) {
                        dom.style.left </span>= 0 + "px"<span style="color: #000000;">;
                    } </span><span style="color: #0000ff;">else</span> <span style="color: #0000ff;">if</span> (l ><span style="color: #000000;"> r) {
                        dom.style.left </span>= r + "px"<span style="color: #000000;">;
                    } </span><span style="color: #0000ff;">else</span><span style="color: #000000;"> {
                        dom.style.left </span>= l + "px"<span style="color: #000000;">;
                    }
                    </span><span style="color: #0000ff;">if</span> (t < 0<span style="color: #000000;">) {
                        dom.style.top </span>= 0 + "px"<span style="color: #000000;">;
                    } </span><span style="color: #0000ff;">else</span> <span style="color: #0000ff;">if</span> (t ><span style="color: #000000;"> b) {
                        dom.style.top </span>= b + "px"<span style="color: #000000;">;
                    } </span><span style="color: #0000ff;">else</span><span style="color: #000000;"> {
                        dom.style.top </span>= t + "px"<span style="color: #000000;">;
                    }
                }
            }
        dom.onmouseup </span>= <span style="color: #0000ff;">function</span><span style="color: #000000;"> () {
            document.onmousemove </span>= <span style="color: #0000ff;">null</span><span style="color: #000000;">;
            document.onmouseup </span>= <span style="color: #0000ff;">null</span><span style="color: #000000;">;
        }
    }
 }
 utils.dragMov(document.getElementById(</span>'dog'<span style="color: #000000;">));
</span>

另外一个（转）



    
        Test
        
    
    
        
            Dialog
            
                This is a draggable test.
            
        
        
            <span style="color: #0000ff;">var</span> Dragging=<span style="color: #0000ff;">function</span>(dom){ <span style="color: #008000;">//</span><span style="color: #008000;"> ， ， null</span>
                <span style="color: #0000ff;">var</span> draggingObj=<span style="color: #0000ff;">null</span>; <span style="color: #008000;">//</span><span style="color: #008000;">dragging Dialog</span>
                <span style="color: #0000ff;">var</span> diffX=0<span style="color: #000000;">;
                </span><span style="color: #0000ff;">var</span> diffY=0<span style="color: #000000;">;
                
                </span><span style="color: #0000ff;">function</span><span style="color: #000000;"> mouseHandler(e){
                    </span><span style="color: #0000ff;">switch</span><span style="color: #000000;">(e.type){
                        </span><span style="color: #0000ff;">case</span> 'mousedown'<span style="color: #000000;">:
                            draggingObj</span>=dom;<span style="color: #008000;">//</span><span style="color: #008000;"> </span>
                            <span style="color: #0000ff;">if</span>(draggingObj!=<span style="color: #0000ff;">null</span><span style="color: #000000;">){
                                diffX</span>=e.clientX-<span style="color: #000000;">draggingObj.offsetLeft;
                                diffY</span>=e.clientY-<span style="color: #000000;">draggingObj.offsetTop;
                            }
                            </span><span style="color: #0000ff;">break</span><span style="color: #000000;">;
                        
                        </span><span style="color: #0000ff;">case</span> 'mousemove'<span style="color: #000000;">:
                            </span><span style="color: #0000ff;">if</span><span style="color: #000000;">(draggingObj){
                                draggingObj.style.left</span>=(e.clientX-diffX)+'px'<span style="color: #000000;">;
                                draggingObj.style.top</span>=(e.clientY-diffY)+'px'<span style="color: #000000;">;
                            }
                            </span><span style="color: #0000ff;">break</span><span style="color: #000000;">;
                        
                        </span><span style="color: #0000ff;">case</span> 'mouseup'<span style="color: #000000;">:
                            draggingObj </span>=<span style="color: #0000ff;">null</span><span style="color: #000000;">;
                            diffX</span>=0<span style="color: #000000;">;
                            diffY</span>=0<span style="color: #000000;">;
                            </span><span style="color: #0000ff;">break</span><span style="color: #000000;">;
                    }
                };
                </span><span style="color: #0000ff;">return</span><span style="color: #000000;"> {
                    enable:</span><span style="color: #0000ff;">function</span><span style="color: #000000;">(){
                        document.addEventListener(</span>'mousedown'<span style="color: #000000;">,mouseHandler);
                        document.addEventListener(</span>'mousemove'<span style="color: #000000;">,mouseHandler);
                        document.addEventListener(</span>'mouseup'<span style="color: #000000;">,mouseHandler);
                    },
                    disable:</span><span style="color: #0000ff;">function</span><span style="color: #000000;">(){
                        document.removeEventListener(</span>'mousedown'<span style="color: #000000;">,mouseHandler);
                        document.removeEventListener(</span>'mousemove'<span style="color: #000000;">,mouseHandler);
                        document.removeEventListener(</span>'mouseup'<span style="color: #000000;">,mouseHandler);
                    }
                }
            }
            Dragging(document.querySelector(</span>'#dlgTest'<span style="color: #000000;">)).enable();
        </span>

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

다양한 언어의 JSON

JSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

js 드래그 실현

좋은 웹페이지 즐겨찾기