爱她就圈住她

马黑黑

马黑黑

这叫有边界拖拽。全部代码：

1. <style>
   
2. 
   
3. .stage {
   
4.         margin: auto;
   
5.         display: flex;
   
6.         justify-content: center;
   
7.         align-items: center;
   
8.         width: 740px;
   
9.         height: 560px;
   
10.         background: #eee;
    
11.         box-shadow: 1px 1px 2px #666;
    
12.         position: relative;
    
13. }
    
14. .stage::before {
    
15.         position: absolute;
    
16.         content: '图片拖拽不出父元素';
    
17.         top: 10px;
    
18.         left: 10px;
    
19.         font: normal 14px sans-serif;
    
20. }
    
21. .movBox {
    
22.         position: absolute;
    
23.         width: 120px;
    
24.         height: 120px;
    
25.         background: #ccc url('/data/attachment/forum/202205/17/131141iqoznnyfo4pqgqna.jpg') no-repeat;
    
26.         border-radius: 50%;
    
27.         cursor: pointer;
    
28. }
    
29. 
    
30. </style>
    
31. 
    
32. <div class="stage">
    
33.         <div class="movBox"></div>
    
34. </div>
    
35. 
    
36. <script>
    
37. 
    
38. let canMove = false;
    
39. let m2pgX, m2pgY,m2eX,m2eY;
    
40. let movBox = document.querySelector('.movBox');
    
41. let stage = document.querySelector('.stage');
    
42. 
    
43. movBox.onmousedown = function(e){
    
44.         e = e || event;
    
45.         canMove = true;
    
46.         m2pgX = e.pageX;
    
47.         m2pgY = e.pageY;
    
48.         m2eX = m2pgX - this.offsetLeft;
    
49.         m2eY = m2pgY - this.offsetTop;
    
50. }
    
51. 
    
52. movBox.onmousemove = function(e){
    
53.         if(canMove){
    
54.                 e = e || event;
    
55.                 m2pgX = e.pageX;
    
56.                 m2pgY = e.pageY;
    
57.                 let eLeft = m2pgX - m2eX;
    
58.                 if(eLeft < 0) eLeft = 0;
    
59.                 if(eLeft > stage.clientWidth - this.clientWidth) eLeft = stage.clientWidth - this.clientWidth;
    
60.                 let eTop = m2pgY - m2eY;
    
61.                 if(eTop < 0) eTop = 0;
    
62.                 if(eTop > stage.clientHeight - this.clientHeight) eTop = stage.clientHeight - this.clientHeight;
    
63.                 this.style.left = eLeft+ 'px';
    
64.                 this.style.top = eTop + 'px';
    
65.         }
    
66. }
    
67. 
    
68. movBox.onmouseup = function() { canMove = false; }
    
69. movBox.onmouseleave = function(){ canMove = false; }
    
70. 
    
71. </script>

复制代码

加林森

学习学习，谢谢老黑教程！

梦油

她当俺的小孙女儿还差不多。

朵拉

手机上不好操作拖拽，就看一看

来看你

小美女萌萌哒，带着她溜达一圈

马黑黑

醉美水芙蓉 发表于 2022-5-17 16:55
小美女好可爱！

能拖走么

马黑黑

梦油 发表于 2022-5-17 14:41
她当俺的小孙女儿还差不多。

可以考虑

马黑黑

朵拉 发表于 2022-5-17 15:08
手机上不好操作拖拽，就看一看

手机没试过，用的是标准的鼠标事件

红影

这个好玩，我使劲拖也拖不出去了。这个带不走了

大猫咪

必须圈住她 空了学习，老黑晚上好！

马黑黑

大猫咪 发表于 2022-5-17 19:22
必须圈住她 空了学习，老黑晚上好！

马黑黑

红影 发表于 2022-5-17 18:59
这个好玩，我使劲拖也拖不出去了。这个带不走了

东篱可以四处走走看世界，这个只能待在宫里了

梦油

马黑黑 发表于 2022-5-17 18:15
可以考虑

哈哈哈……我的小孙女已经是而立之年的人啦

马黑黑

醉美水芙蓉 发表于 2022-5-17 21:08
带着走啦！

挺好

红影

马黑黑 发表于 2022-5-17 19:33
东篱可以四处走走看世界，这个只能待在宫里了

这个莫非是后宫

马黑黑

红影 发表于 2022-5-19 12:14
这个莫非是后宫

估计是吧

红影

马黑黑 发表于 2022-5-19 12:16
估计是吧

圈得好，东篱大哥还指望后宫卖个好价钱呢