IE, firefxo 및 chrome 브라우저에서 마우스 드래그 및 드래그 마우스 포인터 효과 지원_레이아웃 및 레이어
핵심 코드:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>鼠标拖动和拖拽的鼠标指针特效</title>
<style>
#box{width:100px;height:100px;background:#966;position:absolute;left:100px;top:100px;cursor:pointer;}
</style>
</head>
<body>
<div id="box"></div>
<script>
var doc=document;
function getViewport(){
return {width:Math.max(document.documentElement.clientWidth,document.documentElement.scrollWidth),
height:Math.max(document.documentElement.clientHeight,document.documentElement.scrollHeight)
};
}
function compareNum(x,minNum,maxNum){
switch(true){
case x<minNum:x=minNum;break;
case x>maxNum:x=maxNum;break;
default:x;
}
return x;
}
box.style.left='100px'
box.style.top='100px'
box.onmousedown=function(e){
var e=e||window.event;
var maxL=getViewport().width-100,
maxT=getViewport().height-100;
this.startL=parseInt(this.style.left);
this.startT=parseInt(this.style.top);
//alert(e.clientX)
this.startX=e.clientX;
this.startY=e.clientY;
//alert(maxL+':'+maxT+':'+L+':'+T)
doc.onmousemove=function(e){
posXY(e,0,0,maxL,maxT);
};
doc.onmouseup=function(){
doc.onmousemove=null;
doc.onmouseup=null;
};
return false;
}
function posXY(e,minL,minT,maxL,maxT){
var e=e||window.event;
var x=box.startL-(box.startX-e.clientX);
var y=box.startT-(box.startY-e.clientY);
box.style.left=compareNum(x,minL,maxL)+'px'
box.style.top=compareNum(y,minT,maxT)+'px'
}
</script>
</body>
</html>[Ctrl A 모두 선택 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다.
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7612
15
1387
52
88
11
68
19
29
136
JavaScript를 사용하여 이미지의 드래그 및 확대/축소 기능을 구현하는 방법은 무엇입니까?
Oct 27, 2023 am 09:39 AM
JavaScript를 사용하여 이미지의 드래그 및 확대/축소 기능을 구현하는 방법은 무엇입니까? 최신 웹 개발에서는 이미지 드래그 및 확대/축소가 일반적인 요구 사항입니다. JavaScript를 사용하면 이미지에 드래그 및 확대/축소 기능을 쉽게 추가하여 더 나은 사용자 경험을 제공할 수 있습니다. 이 기사에서는 구체적인 코드 예제와 함께 JavaScript를 사용하여 이 기능을 구현하는 방법을 소개합니다. HTML 구조 먼저, 그림을 표시하고 추가하려면 기본 HTML 구조가 필요합니다.
Vue에서 드래그 앤 드롭 선택 및 배치에 대한 팁 및 모범 사례
Jun 25, 2023 am 10:13 AM
Vue는 단일 페이지 애플리케이션(SPA)을 구축하는 데 적합한 널리 사용되는 JavaScript 프레임워크입니다. 지침과 구성 요소를 통해 드래그 앤 드롭 선택 및 배치 기능을 지원하여 사용자에게 더 나은 대화형 경험을 제공합니다. 이 기사에서는 Vue에서 드래그 앤 드롭 선택 및 배치에 대한 기술과 모범 사례를 소개합니다. 드래그 명령어 Vue는 드래그 효과를 쉽게 얻을 수 있는 v-드래그 가능한 명령어를 제공합니다. 이 명령은 모든 요소에 적용할 수 있으며 드래그 스타일을 사용자 정의할 수 있습니다.
Vue를 사용하여 드래그 앤 드롭 정렬 효과를 구현하는 방법
Sep 20, 2023 pm 03:01 PM
Vue를 사용하여 드래그 앤 드롭 정렬 효과를 구현하는 방법 Vue.js는 대화형 프런트 엔드 애플리케이션을 구축하는 데 도움이 되는 인기 있는 JavaScript 프레임워크입니다. Vue에서는 드래그 앤 드롭 정렬 효과를 쉽게 구현할 수 있어 사용자가 요소를 드래그하여 데이터를 정렬할 수 있습니다. 이 기사에서는 Vue를 사용하여 드래그 앤 드롭 정렬 효과를 구현하는 방법을 소개하고 구체적인 코드 예제를 제공합니다. 먼저 Vue 인스턴스를 생성하고 정렬할 데이터를 저장할 배열을 정의해야 합니다. 이 예에서 우리는
Vue 실용적인 기술: v-on 명령을 사용하여 마우스 드래그 이벤트 처리
Sep 15, 2023 am 08:24 AM
Vue 실무 기술: v-on 명령을 사용하여 마우스 끌기 이벤트 처리 서문: Vue.js는 단순성, 사용 용이성 및 유연성으로 인해 많은 개발자가 가장 먼저 선택하는 JavaScript 프레임워크입니다. Vue 애플리케이션 개발에서 사용자 상호 작용 이벤트를 처리하는 것은 필수적인 기술입니다. 이 기사에서는 Vue의 v-on 지시문을 사용하여 마우스 드래그 이벤트를 처리하는 방법을 소개하고 구체적인 코드 예제를 제공합니다. Vue 인스턴스 만들기: 먼저 HTML 파일에 Vue.js 라이브러리 파일을 도입합니다. &
Vue에서 드래그 앤 드롭 요소를 복사하고 이동하는 방법은 무엇입니까?
Jun 25, 2023 am 08:35 AM
Vue는 편리한 드래그 앤 드롭 기능을 제공하여 요소를 쉽게 복사하고 이동할 수 있는 인기 있는 JavaScript 프레임워크입니다. 다음으로 Vue에서 드래그 앤 드롭 요소를 복사하고 이동하는 방법을 살펴보겠습니다. 1. 드래그 앤 드롭 요소의 기본 구현 Vue에서 드래그 앤 드롭 요소를 복사하고 이동하려면 먼저 해당 요소의 기본 드래그 앤 드롭 기능을 구현해야 합니다. 구체적인 구현 방법은 다음과 같습니다. 템플릿에서 드래그해야 하는 요소를 추가합니다: <divclass="drag-elem"
JavaScript를 사용하여 요소의 크기를 변경하기 위해 끌어서 놓기 기능을 구현하는 방법은 무엇입니까?
Oct 21, 2023 am 11:34 AM
JavaScript를 사용하여 요소의 크기를 변경하기 위해 끌어서 놓기 기능을 구현하는 방법은 무엇입니까? 웹 기술의 발전으로 인해 요소의 크기를 변경하기 위해 드래그 앤 드롭 기능을 갖춘 웹 페이지가 점점 더 많아지고 있습니다. 예를 들어 div 요소를 끌어서 크기를 조정하여 너비와 높이를 조정할 수 있습니다. 이 기사에서는 JavaScript를 사용하여 이 기능을 구현하는 방법을 소개하고 구체적인 코드 예제를 제공합니다. 시작하기 전에 요소의 위치 및 크기 속성과 같은 몇 가지 기본 개념을 이해해야 합니다. CSS에서 t까지
uniapp에서 드래그 앤 드롭 정렬 기능을 구현하는 방법
Jul 06, 2023 pm 12:31 PM
uniapp에서 드래그 앤 드롭 정렬 기능을 구현하는 방법 드래그 앤 드롭 정렬은 사용자가 요소를 드래그하여 순서를 변경할 수 있는 일반적인 사용자 상호 작용 방법입니다. uniapp에서는 컴포넌트 라이브러리와 몇 가지 기본 드래그 이벤트를 사용하여 드래그 앤 드롭 정렬 기능을 구현할 수 있습니다. 유니앱에서 드래그 앤 드롭 정렬 기능을 구현하는 방법을 코드 예시와 함께 자세히 소개합니다. 1단계: 기본 목록 페이지 만들기 먼저 정렬해야 하는 요소를 표시하는 기본 목록 페이지를 만들어야 합니다. 사용할 수 있습니다&
Vue를 사용하여 후크 드래그 효과를 구현하는 방법
Sep 19, 2023 pm 02:11 PM
Vue를 사용하여 후크 드래그 효과를 구현하는 방법 소개: 현대 웹 디자인에서는 드래그 앤 드롭 효과가 매우 보편화되어 사용자 경험을 향상시키고 상호 작용성을 높일 수 있습니다. 널리 사용되는 JavaScript 프레임워크인 Vue는 드래그 앤 드롭 효과를 쉽게 구현할 수 있는 편리한 도구와 라이브러리를 많이 제공합니다. 이 기사에서는 Vue를 사용하여 후크 드래그 효과를 구현하는 방법을 소개하고 구체적인 코드 예제를 제공합니다. 1. 준비 작업 Vue를 사용하여 후크 드래그 효과를 구현하기 전에 다음 작업을 준비해야 합니다. Vue 프레임워크를 설치합니다. 할 수 있다
