h5新知识_3t拖拽

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         *{
 8             margin: 0;
 9             padding: 0;
10         }
11         html{
12             font-size: 10px;
13         }
14         div{
15             width: 20rem;
16             height: 20rem;
17             background-color: red;
18             float: left;
19             margin: 1rem;
20         }
21 
22         div:nth-child(2){
23             background-color: green;
24         }
25 
26         div:nth-child(3){
27             background-color: blue;
28         }
29 
30         #box{
31             height: 4.5rem;
32             line-height: 4.5rem;
33             font-size: 1.8rem;
34             background-color: purple;
35             text-align: center;
36             color: #fff;
37             cursor: move;
38         }
39     </style>
40 </head>
41 <body>
42    <div id="div1">
43        <p id="box" draggable="true">拖拽内容</p>
44    </div>
45    <div id="div2"></div>
46    <div id="div3"></div>
47 <script>
48     // 1. 找到源文件
49     let box = document.querySelector('#box');
50     // 1.1 拖拽开始
51     box.ondragstart = function () {
52         console.log('开始拖动');
53     };
54     // 1.2 拖拽过程
55     box.ondrag = function () {
56         console.log('拖动');
57     };
58     // 1.3 拖拽结束
59     box.ondragend = function () {
60         console.log('结束拖动');
61     };
62 
63     // 2. 释放对象
64     let target = document.querySelector('#div2');
65 
66     target.ondragenter = function () {
67         console.log('目标对象进入');
68     };
69 
70     target.ondragover = function (e) {
71         console.log('悬停在目标对象上方');
72         e.preventDefault();
73         return false;
74     };
75 
76     target.ondragleave = function () {
77         console.log('源对象离开目标对象');
78     };
79 
80     target.ondrop = function () {
81         console.log('在目标对象上松手');
82         this.appendChild(box);
83     }
84 </script>
85 </body>
86 </html>

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         *{
 8             margin: 0;
 9             padding: 0;
10         }
11         html{
12             font-size: 10px;
13         }
14         div{
15             width: 20rem;
16             height: 20rem;
17             background-color: red;
18             float: left;
19             margin: 1rem;
20         }
21 
22         div:nth-child(2){
23             background-color: green;
24         }
25 
26         div:nth-child(3){
27             background-color: blue;
28         }
29 
30         #box{
31             height: 4.5rem;
32             line-height: 4.5rem;
33             font-size: 1.8rem;
34             background-color: purple;
35             text-align: center;
36             color: #fff;
37             cursor: move;
38         }
39     </style>
40 </head>
41 <body>
42     <div id="div1">
43         <p id="box" draggable="true">拖拽内容</p>
44     </div>
45     <div id="div2"></div>
46     <div id="div3"></div>
47     <script>
48         let obj = null;
49         // 1. 找到源文件
50         let box = document.querySelector('#box');
51         // 1.1 拖拽开始
52         box.ondragstart = function (e) {
53             // console.log('开始拖动');
54             // console.log(e.target);
55             obj = e.target;
56         };
57         // 1.2 拖拽过程
58         box.ondrag = function () {
59             console.log('拖动');
60         };
61         // 1.3 拖拽结束
62         box.ondragend = function () {
63             console.log('结束拖动');
64         };
65 
66         // 2. 释放对象
67         let target = document.querySelector('#div2');
68 
69         target.ondragenter = function () {
70             console.log('目标对象进入');
71         };
72 
73         target.ondragover = function () {
74             console.log('悬停在目标对象上方');
75             return false;//阻止了默认事件
76         };
77 
78         target.ondragleave = function () {
79             console.log('源对象离开目标对象');
80         };
81 
82         target.ondrop = function () {
83             console.log(this);
84             console.log('在目标对象上松手');
85             this.appendChild(obj);
86         }
87     </script>
88 </body>
89 </html>

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         * {
 8             margin: 0;
 9             padding: 0;
10         }
11 
12         html {
13             font-size: 10px;
14         }
15 
16         div {
17             width: 20rem;
18             height: 20rem;
19             background-color: red;
20             float: left;
21             margin: 1rem;
22         }
23 
24         div:nth-child(2) {
25             background-color: green;
26         }
27 
28         div:nth-child(3) {
29             background-color: blue;
30         }
31 
32         p {
33             height: 4.5rem;
34             line-height: 4.5rem;
35             font-size: 1.8rem;
36             background-color: purple;
37             text-align: center;
38             color: #fff;
39             cursor: move;
40             border-bottom: 1px solid #fff;
41         }
42     </style>
43 </head>
44 <body>
45 <div id="div1">
46     <p id="box1" draggable="true">拖拽内容1</p>
47     <p id="box2" draggable="true">拖拽内容2</p>
48     <p id="box3" draggable="true">拖拽内容3</p>
49     <p id="box4" draggable="true">拖拽内容4</p>
50 </div>
51 <div id="div2"></div>
52 <div id="div3"></div>
53 <script>
54     // 1. 找到源文件
55     // 1.1 拖拽开始
56     document.ondragstart = function (e) {
57         // console.log(e.dataTransfer);
58         // console.log(e.target.id);
59         event.dataTransfer.setData('domId', e.target.id);
60     };
61     // 1.2 拖拽过程
62     document.ondrag = function () {
63         // console.log('拖动');
64     };
65     // 1.3 拖拽结束
66     document.ondragend = function () {
67         // console.log('结束拖动');
68     };
69 
70     // 2. 释放对象
71     document.ondragenter = function () {
72       // console.log('目标对象进入');
73     };
74 
75     document.ondragover = function () {
76         // console.log('悬停在目标对象上方');
77         return false;
78     };
79 
80     document.ondragleave = function () {
81         // console.log('源对象离开目标对象');
82     };
83 
84     document.ondrop = function (e) {
85        /* console.log(this);
86         console.log('在目标对象上松手');*/
87         let id = event.dataTransfer.getData('domId');
88         // console.log(id);
89         // console.log(e.target);
90         e.target.appendChild(document.getElementById(id));
91     }
92 </script>
93 </body>
94 </html>

猜你喜欢