JS | 元素拖动

最新推荐文章于 2023-10-09 20:37:19 发布
最新推荐文章于 2023-10-09 20:37:19 发布
阅读量499 收藏
点赞数
分类专栏： CSS JS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38765789/article/details/100521781
版权

确定需要的事件

1. 点击事件: 点击待拖动元素触发，记录下当前鼠标相对于元素的位置dis_x和dis_y，这个距离在拖动的时候是不变的！

2 . 移动事件：在1中点击事件的基础上，加上鼠标的移动事件，每次移动就先获取鼠标当前相对浏览器的位置cur_x和cur_y，那么元素的当前位置为：

鼠标相对于浏览器的位置 - 鼠标相对于元素的位置 = （cur_x - dis_x，cur_x - dis_y ）

最后不要忘了设置鼠标mouseup事件，当鼠标松开时解绑所有事件

 

完整代码：


                

        

        

    




        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  jensonliu
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    0
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
js鼠标托拽移动div

				
			

			

				

					xing942012的博客
				

				

					11-23
					
					632
					
				

			

		

		

			
				
首先先写好基础的样式HTML和css样式


<div id="div">
			来一段文字<br>拖着看看
		</div>


	#div {
				width: 150px;
				height: 100px;
				background-color: skyblue;
				text-align: center;
				line-height: 50px;
				position: absolute;
				top: 3px;
			}

然后是在j

			
		

	



                

              
                



	

		

			

				
					
原生JavaScript实现拖动校验

				
			

			

				

					weixin_43147104的博客
				

				

					09-28
					
					297
					
				

			

		

		

			
				
滑动验证思路
思路

页面布局采用定位,背景颜色变化bg的宽度为0，其宽度会随着滑块的移动而移动。

页面结构
<!--验证-->
<div class="box">
    <!--滑块-->
    <div class="btn"></div>
    <!--文字-->
    <p class="text">请滑动滑块</p>
    <!--背景-->
    <div class=

			
		

	



                


  
              

                


	

		

			

				
					
利用js实现多元素拖拽

				
			

			

				

					个人笔记
				

				

					03-29
					
					1486
					
				

			

		

		

			
				
第一种方法
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			div{
				width: 50px;
				height: 50px;
				border-radius: 50%;
				position: absolute;
				left: 0;
		

			
		

	





	

		

			

				
					
JavaScript 原生拖放笔记

				
			

			

				

					Hello__World123的博客
				

				

					12-27
					
					332
					
				

			

		

		

			
				
JavaScript 文件拖放  原生拖放事件 原生拖放方法 文件拖放详解 js原生拖放事件

			
		

	



		

			
		



	

		

			

				
					
js实现鼠标拖拽功能基本思路

					
热门推荐

				
			

			

				

					春华秋实
				

				

					09-02
					
					1万+
					
				

			

		

		

			
				
如果要设置物体拖拽，那么必须使用三个事件，并且这三个事件的使用顺序不能颠倒。





onmousedown：鼠标按下事件onmousemove：鼠标移动事件onmouseup：鼠标抬起事件


  拖拽的基本原理就是根据鼠标的移动来移动被拖拽的元素。鼠标的移动也就是x、y坐标的变化;元素的移动就是style.position的 top和left的改变。当然，并不是任何时候移动

			
		

	





	

		

			

				
					
javascript实现拖动元素交换位置

				
			

			

				

					10-23
				

			

		

		

			
				
在JavaScript中实现拖动元素并交换位置的效果，通常涉及到事件监听、CSS样式调整以及DOM操作。以下是一个简化的实现步骤：  1. **设置HTML结构**：  首先，你需要创建一个包含多个可拖动元素（如`<li>`）的容器（如`...

			
		

	





	

		

			

				
					
javascript实现dom元素可拖动

				
			

			

				

					10-22
				

			

		

		

			
				
HTML DOM 是 W3C 标准（是 HTML 文档对象模型的英文缩写，Document Object Model for ...通过 DOM，可以访问所有的 HTML 元素，连同它们所包含的文本和属性。可以对其中的内容进行修改和删除，同时也可以创建新的元素。

			
		

	





	

		

			

				
					
js实现拖拽元素选择和删除

				
			

			

				

					10-14
				

			

		

		

			
				
在JavaScript中，实现拖拽元素选择和删除的功能，通常涉及到事件监听、DOM操作以及一些基本的CSS样式调整。以下是一个详细的步骤说明：  1. **创建可拖动元素**: 首先，我们需要一个可以被拖动的元素，例如这里的`....

			
		

	





	

		

			

				
					
利用JavaScript实现拖拽改变元素大小|angluo-javascript-173722.pdf

				
			

			

				

					10-20
				

			

		

		

			
				
本文主要介绍了JavaScript实现拖拽改变元素大小的原理及具体实例分析，具有很好的参考价值，需要的朋友一起来看下吧

			
		

	





	

		

			

				
					
js 元素拖拽效果

				
			

			

				

					11-07
				

			

		

		

			
				
在JavaScript（JS）中实现元素拖拽效果是一项常见的交互设计技术，它允许用户通过鼠标或触摸设备移动页面上的元素，从而提升用户体验。本教程将详细解释如何创建一个基本的元素拖拽功能，并演示如何将拖动的元素放入...

			
		

	





	

		

			

				
					
javascript拖动元素到另一个元素当中，使用拖放事件dragstart\drag\dragend和dragenter\dragover\dragleave

					
最新发布

				
			

			

				

					cdcdhj的博客
				

				

					10-09
					
					324
					
				

			

		

		

			
				
只是一个测试，给了一定的方法和思路知道拖动事件对于拖动元素到另一个元素当中的过程和设置属性。//这两项都必须设置成move，被拖动目标才能放进放置目标中。//将拖动目标添加到放置目标当中。//将拖动元素放进数组。//设置需要传递的数据。'源对象进入目标对象''源对象悬停目标对象''源对象离开目标对象''源对象释放目标对象'

			
		

	





	

		

			

				
					
js时实现鼠标拖动div

				
			

			

				

					艾小逗
				

				

					04-09
					
					2544
					
				

			

		

		

			
				
实现js拖动div
实现步骤：

鼠标按下时，标记元素为可拖动状态，并记下鼠标当前位置的偏移；
鼠标开始移动，判断元素状态是否可以拖动，如果是则更新元素位置到当前鼠标的位置；
放开鼠标后，元素变为不可拖动状态。

图示解释：


代码：
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF...

			
		

	





	

		

			

				
					
js 拖拽检测

				
			

			

				

					qq_35187942的博客
				

				

					02-08
					
					585
					
				

			

		

		

			
				
&lt;!DOCTYPE HTML&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
&lt;title&gt;无标题文档&lt;/title&gt;
&lt;style&gt;
#div1 {widt

			
		

	





	

		

			

				
					
js 实现拖动元素到任意位置

				
			

			

				

					m0_67841039的博客
				

				

					05-18
					
					1204
					
				

			

		

		

			
				
JS实现拖拽到页面任意位置

			
		

	





	

		

			

				
					
Drag，js实现鼠标拖拽元素

				
			

			

				

					季诗筱的博客
				

				

					03-09
					
					4200
					
				

			

		

		

			
				
今天有个需求，就是实现移动端元素的拖拽功能，自己用原生代码写了一个在PC端通过鼠标进行拖拽的例子，代码如下：<!DOCTYPE html>
<html>
<head>
    <title>实现拖拽功能</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="css/style.css">

			
		

	





	

		

			

				
					
js计算鼠标当前相对于某个元素的位置

				
			

			

				

					shidaping的博客
				

				

					10-13
					
					1万+
					
				

			

		

		

			
				
先上代码：



  
  
  #mydiv{
    border:1px solid grey;
    width: 400px;
    height: 200px;
  }
  





var bindEvent = function(dom, eventName, listener){
  if(dom.attachEvent) {
    dom.attachEvent('o

			
		

	





	

		

			

				
					
拖拽插件Sortable.js获取拖拽前后，被拖拽元素所在的位置序位

				
			

			

				

					c0411034的博客
				

				

					08-05
					
					1万+
					
				

			

		

		

			
				
1.介绍

Sortable.js是一款轻量级的拖放排序列表的js插件，虽然体积小，但是功能很强大，不过拖拽的动画效果并不是很理想

下载地址：https://github.com/RubaXa/Sortable 
官方DEMO：http://rubaxa.github.io/Sortable/ 
中文详细介绍：https://segmentfault.com/a/1190000008209715...

			
		

	





	

		

			

				
					
Js-动态边框鼠标拖动

				
			

			

				

					keyuzhang的博客
				

				

					04-16
					
					830
					
				

			

		

		

			
				
<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<style type="text/css">
	* {
		margin:0;
		padding:0;
	}
	.box {
		width:100px;
		hei...

			
		

	





	

		

			

				
					
js判断鼠标是否在某一块级元素内部

				
			

			

				

					xiecheng1995的博客
				

				

					07-02
					
					4925
					
				

			

		

		

			
				
在某一实际项目中需要拖拽功能，并实现拖拽到某一元素内，执行响应的操作。这里给出一个鼠标是否在元素内的判别函数。其中obj为拖拽进的元素（而非拖拽的元素）。
// 判断鼠标是否落在一个块级元素内部
checkIn(obj) {
    var x = Number(window.event.clientX) // 鼠标相对屏幕横坐标
    var y = Number(window.event.clientY) // 鼠标相对屏幕纵坐标

    var div_x = Number(obj.getBoun

			
		

	





	

		

			

				
					
js拖拽不让元素拖拽时半透明

				
			

			

				

					07-20
				

			

		

		

			
				
要在拖拽元素时使其保持不透明，你可以通过在拖拽开始和结束时分别设置元素的透明度来实现。你可以使用`dragstart`和`dragend`事件来实现这个效果。  以下是一个示例代码：  ```html   .draggable {  opacity: 1;  }...

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值