html随意拖动内容位置的两种实现方式

顾北○

测试：chrome v80.0.3987.122 正常
两种方式为：拖拽普通标签位置或拖拽canvas中的文本框位置
1. 实现鼠标拖动标签元素到任意位置
演示地址
css 代码

1. #range {
   
2.     position: relative;
   
3.     width: 600px;
   
4.     height: 400px;
   
5.     margin: 10px;
   
6.     background-color: rgb(133, 246, 250);
   
7. }
   
8. 
   
9. .icon {
   
10.     position: absolute;
    
11.     height: 100px;
    
12.     width: 100px;
    
13.     cursor: move;
    
14.     background-color: #ff9204;
    
15.     user-select: none;
    
16. }

复制代码

html代码

1. <div id="range">
   
2.     <div class="icon">100*100</div>
   
3. </div>

复制代码

js代码

1. const main = document.getElementById('range');
   
2. const icon = document.querySelector('.icon');
   
3. let move = false;
   
4. let deltaLeft = 0, deltaTop = 0;
   
5. 
   
6. // 拖动开始事件，要绑定在被移动元素上
   
7. icon.addEventListener('mousedown', function (e) {
   
8.     /*
   
9.     * @des deltaLeft 即移动过程中不变的值
   
10.     */
    
11.     deltaLeft = e.clientX-e.target.offsetLeft;
    
12.     deltaTop = e.clientY-e.target.offsetTop;
    
13.     move = true;
    
14. })
    
15. 
    
16. // 移动触发事件要放在，区域控制元素上
    
17. main.addEventListener('mousemove', function (e) {
    
18.     if (move) {
    
19.         const cx = e.clientX;
    
20.         const cy = e.clientY;
    
21.         /** 相减即可得到相对于父元素移动的位置 */   
    
22.         let dx = cx - deltaLeft
    
23.         let dy = cy - deltaTop
    
24. 
    
25.         /** 防止超出父元素范围 */
    
26.         if (dx < 0) dx = 0
    
27.         if (dy < 0) dy = 0
    
28.         if (dx > 500) dx = 500
    
29.         if (dy > 300) dy = 300
    
30.         icon.setAttribute('style', `left:${dx}px;top:${dy}px`)
    
31.     }
    
32. })
    
33. 
    
34. // 拖动结束触发要放在，区域控制元素上
    
35. main.addEventListener('mouseup', function (e) {
    
36.     move = false;
    
37.     console.log('mouseup');
    
38. })

复制代码

2. canvas绘制文本框，并实现鼠标将其拖拽移动到任意位置
css 代码

1. .cus-canvas{
   
2.     background: rgb(50, 204, 243);
   
3. }
   
4. 
   
5. .input-ele{
   
6.     display: none;
   
7.     position: fixed;
   
8.     width: 180px;
   
9.     border: 0;
   
10.     background-color: #fff;
    
11. }

复制代码

html 代码

1. <div>
   
2.     <canvas id="canvas" class="cus-canvas"  width="800" height="600"></canvas>
   
3.     <input id="inputEle" class="input-ele"/>
   
4. </div>

复制代码

js代码
实现原理为记录鼠标移动的位置，不断的重绘矩形框和文本内容

1. let mouseDown = false;
   
2. let deltaX = 0;
   
3. let deltaY = 0;
   
4. let text = 'hello'
   
5. const canvas = document.getElementById('canvas');
   
6. const ctx = canvas.getContext('2d');
   
7. const cw = canvas.width, ch = canvas.height;
   
8. const rect = {
   
9.     x: 20,
   
10.     y: 20,
    
11.     width: 150,
    
12.     height: 50
    
13. }
    
14. 
    
15. /** 设置文字和边框样式 */
    
16. ctx.font="16px Arial";
    
17. ctx.fillStyle = "#fff";
    
18. /** 设置为 center 时，文字段的中心会在 fillText的 x 点 */
    
19. ctx.textAlign = 'center';
    
20. ctx.lineWidth = '2';
    
21. ctx.strokeStyle = '#fff';
    
22. 
    
23. strokeRect()
    
24. 
    
25. const inputEle = document.getElementById('inputEle');
    
26. inputEle.onkeyup =  function(e) {
    
27.     if(e.keyCode === 13) {
    
28.         text = inputEle.value
    
29.         strokeRect()
    
30.         inputEle.setAttribute('style', `display:none`)
    
31.     }
    
32. }
    
33. 
    
34. canvas.ondblclick = function(e){
    
35.     inputEle.setAttribute('style', `left:${e.clientX}px;top:${e.clientY}px;display:block`);
    
36.     inputEle.focus();
    
37. }
    
38. 
    
39. canvas.onmousedown = function(e){
    
40.     /** 获取视口左边界与canvas左边界的距离 加上 鼠标点击位置与canvas左边界的长度，这个值是相对移动过程中不变的值 */
    
41.     deltaX=e.clientX - rect.x;
    
42.     deltaY=e.clientY - rect.y;
    
43.     mouseDown = true
    
44. };  
    
45. 
    
46. const judgeW = cw-rect.width, judgeH = ch-rect.height;
    
47. 
    
48. canvas.onmousemove = function(e){
    
49.     if(mouseDown) {
    
50.         /** 相减即可获得矩形左边界与canvas左边界之间的长度 */
    
51.         let dx = e.clientX-deltaX;
    
52.         let dy = e.clientY-deltaY;
    
53.         if(dx < 0) {
    
54.             dx = 0;
    
55.         } else if (dx > judgeW) {
    
56.             dx = judgeW;
    
57.         }
    
58.         if(dy < 0) {
    
59.             dy = 0;
    
60.         } else if(dy > judgeH) {
    
61.             dy = judgeH;
    
62.         }
    
63.         rect.x = dx;
    
64.         rect.y = dy;
    
65.         strokeRect()
    
66.     }
    
67. };  
    
68. canvas.onmouseup = function(e){
    
69.     mouseDown = false
    
70. };  
    
71. 
    
72. /** 清除指定区域 */
    
73. function clearRect() {
    
74.     ctx.clearRect(0, 0, cw, ch)
    
75. }
    
76. 
    
77. /** 画矩形 */
    
78. function strokeRect() {
    
79.     clearRect()
    
80. 
    
81.     /** 这里如果不调用 beginPath 历史的矩形会重新被绘制 */
    
82.     ctx.beginPath()
    
83.     ctx.rect(rect.x, rect.y, rect.width, rect.height)
    
84.     ctx.stroke();
    
85.     // 设置字体内容，以及在画布上的位置
    
86.     ctx.fillText(text, rect.x + 70, rect.y + 30);
    
87. }

复制代码

欢迎交流 Github
到此这篇关于html随意拖动内容位置的两种实现方式的文章就介绍到这了,更多相关html随意拖动内容内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

3582590268

太棒了！感谢分享这个信息！

CSGO国服

能给个链接吗？我想深入了解一下。

用户8epcigp

谢谢你的提醒，我会注意的。

天天好运01234

每日一回

jerrg7

我完全同意你的观点

从心出发

666666666666

图拉丁

说得太好了，完全同意！

快乐的阳光888

感谢分享，受益匪浅！

寒千叶

我不确定这个信息的准确性，请再确认一下