js在自己给定的大框里实现拖拽

最新推荐文章于 2020-12-14 13:07:11 发布

洛城一别

最新推荐文章于 2020-12-14 13:07:11 发布

阅读量175

点赞数

分类专栏： js 文章标签： js 拖拽

本文链接：https://blog.csdn.net/qq_37491039/article/details/79514331

版权

js 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

   <!DOCTYPE html> 
 
   < 
  html 
  lang= 
  "en"> 
 
   < 
  head> 
 
   < 
  meta 
  charset= 
  "UTF-8"> 
 
   < 
  meta 
  name= 
  "viewport" 
  content= 
  "width=device-width, initial-scale=1.0"> 
 
   < 
  meta 
  http-equiv= 
  "X-UA-Compatible" 
  content= 
  "ie=edge"> 
 
   < 
  title>Document</ 
  title> 
 
   < 
  style 
  lang= 
  ""> 
 
  * { 
 
  margin: 
  0; 
 
  padding: 
  0; 
 
   } 
 
  #div1 { 
 
  width: 
  40 
  px; 
 
  height: 
  40 
  px; 
 
  background: 
  blue; 
 
  position: 
  absolute; 
 
  left: 
  450 
  px; 
 
  top: 
  200 
  px; 
 
   } 
 
  #div2 { 
 
  width: 
  600 
  px; 
 
  height: 
  400 
  px; 
 
  background: 
  #f0f0f0; 
 
  position: 
  relative; 
 
  margin: 
  50 
  px 
  auto 
  0; 
 
   } 
 
   </ 
  style> 
 
   </ 
  head> 
 
   < 
  body> 
 
   < 
  div 
  id= 
  "div2"> 
 
   < 
  div 
  id= 
  "div1"></ 
  div> 
 
   </ 
  div> 
 
   < 
  script> 
 
  var oDiv 
  =document. 
  getElementById( 
  'div1'); 
 
  var sh 
  = 
  false 
 
  var offsetLeftIn 
 
  var offsetTopIn 
 
   document. 
  onmousemove 
  = 
  function( 
  ev){ 
 
  if(sh){ 
 
  var curLeft 
 
  var curTop 
 
   curLeft 
  =(ev.clientX 
  -offsetLeftIn) 
  > 
  0 
  ?ev.clientX 
  -offsetLeftIn 
  : 
  0 
 
   curLeft 
  =(curLeft) 
  <(oDiv.parentNode.offsetWidth 
  -oDiv.offsetWidth) 
  ?(curLeft) 
  :(oDiv.parentNode.offsetWidth 
  -oDiv.offsetWidth); 
 
  // if(curLeft>window.innerWidth-2*oDiv.offsetWidth){ 
 
  // curLeft=window.innerWidth-oDiv.offsetWidth; 
 
  // } 
 
  // curLeft=offsetLeftIn; 
 
   oDiv.style.left 
  =curLeft 
  + 
  'px'; 
 
  // console.log(oDiv.style.left) 
 
   curTop 
  =(ev.clientY 
  -offsetTopIn) 
  > 
  0 
  ?(ev.clientY 
  -offsetTopIn) 
  : 
  0 
 
   curTop 
  =(curTop) 
  <(oDiv.parentNode.offsetHeight 
  -oDiv.offsetWidth) 
  ?(curTop) 
  :(oDiv.parentNode.offsetHeight 
  -oDiv.offsetWidth) 
 
  console. 
  log(curTop) 
 
   oDiv.style.top 
  =curTop 
  + 
  'px'; 
 
   } 
 
   } 
 
   oDiv. 
  onmousedown 
  = 
  function( 
  ev){ 
 
  // console.log(oDiv.offsetLeft) 
 
  // console.log(ev.clientX) 
 
   offsetLeftIn 
  =ev.clientX 
  -oDiv.offsetLeft 
  //是在小滑块里的偏移量+大框在Body里的偏移量 
 
   offsetTopIn 
  =ev.clientY 
  -oDiv.offsetTop 
 
  console. 
  log(offsetTopIn) 
 
   sh 
  = 
  true 
 
   } 
 
   document. 
  onmouseup 
  = 
  function( 
  ev){ 
 
   sh 
  = 
  false 
 
   } 
 
   </ 
  script> 
 
   </ 
  body> 
 
   </ 
  html>

首先每次拖拽都是一个按下动作接着很多移动的动作的过程，按下时就确定了光标在滑块里的偏移量。以后怎么移动这个值都不变。但要注意ev.clientX是在body下的偏移量，而oDiv.offsetLeft则是滑块在大框里的偏移量，所以ev.clientX-oDiv.offsetLeft

得到的是在小滑块里的偏移量加大框在body里的偏移量。把这个量记为offsetLeftIn

然后根据这个恒等式：

offsetLeftIn+当前的滑块在外框偏移量=当前光标在body里的偏移量

就可以求出当前的滑块在外框偏移量

然后把oDiv.style.left设置成这个值即可。

这个可以用来做音量调节的那种效果，只需要把外框和滑块的大小调节合适即可。

洛城一别

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js在自己给定的大框里实现拖拽

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt; &
复制链接

扫一扫

专栏目录