[드래그 DIV] 블로그 시작하자마자 뭐 좀 썼어!
우선 초기div가 필요합니다.
div {
border: 1px #333 solid;
width: 200px;
height: 50px;
}<div id="od"> div</div>그리고 마우스 이벤트입니다. 이 과정을 드래그하는 데 어떤 이벤트가 필요한지 상상해 보세요...
1. 마우스 단추를 누르면 이벤트 mousedown
2、마우스 단추 놓기 이벤트 mouseup
3. 마우스 이동 이벤트 mousemove
첫 번째 단계:div에 마우스 단추를 추가하고 이벤트를 누르면 이 이벤트는 다음과 같은 일을 완성해야 합니다.
브라우저 맨 위와 왼쪽으로div 거리 가져오기
2. 브라우저의 맨 위와 왼쪽으로 마우스를 가져오는 거리
3. 마우스가div의 꼭대기와 왼쪽까지의 거리를 계산한다(마우스가div의 꼭대기와 왼쪽까지의 거리를 직접 얻을 수 있는 방법이 있는지 궁금하면 찾아볼 수 있다)
var div_top = $(obj).offset().top;//div
var div_left = $(obj).offset().left;//div
var mouse_top = e.clientY;//
var mouse_left = e.pageX;//
var mouse_divtop = mouse_top - div_top;// div
var mouse_divleft = mouse_left - div_left;// div 4. Body에 마우스 이동 이벤트를 추가합니다(body는 마우스 이동의 한 구역입니다. 이것은 필요에 따라 수정할 수 있습니다). 이 이벤트는 다음과 같은 일을 완성해야 합니다.
1. 초기 div 숨기기
2、새로 만든div 삭제
3. 바디에 새div 만들기
$("body").bind("mousemove", function (e) {
$("#od").hide();
$(".td").remove();
var html = '<div class="td">' + $("#od").text() + '</div>';
$("body").append(html);
$(".td").css({ "margin-top": e.clientY - mouse_divtop, "margin-left": e.pageX - mouse_divleft });
});2단계: Body에 마우스 단추를 추가하고 이벤트를 해제합니다. 이 이벤트는 다음과 같은 일을 완성해야 합니다.
1. 바디가 바인딩한 마우스 이동 이벤트 삭제
2. 새로 만든div 마우스 단추를 누르면 이 이벤트가 완성할 동작은 첫 번째 단계의 네 번째 동작과 같습니다
$("body").unbind("mousemove");
$(".td").bind("mousedown", function (e) {
});이렇게 하면 OK야, 간단하지 않아!부족한 점을 찾아주신 것도 환영합니다!이것은 본인이 처음으로 수필을 쓴 것이다.싫으면 뿌리지 마라, 헤헤!
아래에 모든 코드를 붙여라
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title> DIV</title>
6 <script src="../js/jquery-1.9.1.min.js"></script>
7 <style>
8 div {
9 border: 1px #333 solid;
10 width: 200px;
11 height: 50px;
12 }
13
14 .td {
15 border: 1px #333 solid;
16 width: 200px;
17 height: 50px;
18 }
19 </style>
20 </head>
21 <body>
22 <div id="od"> div</div>
23 </body>
24 </html>
25 <script>
26 $(document).ready(function () {
27 $("#od").mousedown(function (e) {
28 Mousetd(this, e);
29 });
30 $("body").mouseup(function () {
31 $("body").unbind("mousemove");
32 $(".td").bind("mousedown", function (e) {
33 Mousetd(this, e);
34 });
35 });
36 function Mousetd(obj, e) {
37 var div_top = $(obj).offset().top;//div
38 var div_left = $(obj).offset().left;//div
39 var mouse_top = e.clientY;//
40 var mouse_left = e.pageX;//
41 var mouse_divtop = mouse_top - div_top;// div
42 var mouse_divleft = mouse_left - div_left;// div
43 $("body").bind("mousemove", function (e) {
44 $("#od").hide();
45 $(".td").remove();
46 var html = '<div class="td">' + $("#od").text() + '</div>';
47 $("body").append(html);
48 $(".td").css({ "margin-top": e.clientY - mouse_divtop, "margin-left": e.pageX - mouse_divleft });
49 });
50 }
51 });
52 </script>이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSONJSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
