拖拽

最新推荐文章于 2022-12-14 14:26:02 发布
最新推荐文章于 2022-12-14 14:26:02 发布
阅读量70 收藏
点赞数
分类专栏： 前端 js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/koukou0419/article/details/80536490
版权
前端 同时被 2 个专栏收录
72 篇文章 0 订阅
订阅专栏
js
22 篇文章 0 订阅
订阅专栏 
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.wraper{
			width:300px;
			height:200px;
			background-color: red;
			text-align: center;
			vertical-align:center;
			position:absolute;
			left:0;
			top:0;
		}
		/*.content{
			width:200px;
			height:100px;
			background-color: green;
		}
		.box{
			width:100px;
			height:50px;
			background:yellow;
		}*/

	</style>
</head>
<body>
	<div class="wraper">
		wraper
		<!-- <div class="content">
			content
			<div class="box">box</div>
		</div> -->
	</div>        	
	<script>
	var div=document.getElementsByTagName('div')[0];    
	     	var dix;
	     	var diy;
	     div.onmousedown=function(e){
	     	//鼠标按下去之获取当前鼠标和元素的坐标
	     	//易错点  ，因为我的css属性是通过嵌入式写入的，只能通过getComputedStyle函数来获取，而且必须是window来调用
	     	//因为该函数获取的样式是带px的字符串，所以必须转换
	     	var x=window.getComputedStyle(div,null).left;
	     	
	     	 var y=window.getComputedStyle(div,null).top;
	     	 var dix=e.pageX-parseInt(x);
	     	 var diy=e.pageY-parseInt(y);
	     	 console.log(div.style.left);

	     	document.onmousemove=function(event){

	     		var e=event||window.event;
	     		console.log(dix);
	     		//因为left和top是方块的左顶点坐标位置，如果当前鼠标按住的的是方块的中间位置，方块还是会将左顶点往点击的位置移动，所以需要减去当前鼠标位置和方块左顶点之间的坐标差
	     		div.style.left=(e.pageX-dix)+"px";
	     		div.style.top=(e.pageY-diy)+"px";
	     	};
	     	document.onmouseup=function(){
	     		document.onmousemove=null;//鼠标抬起后，让其移动事件失效
	     	};

	     };
	     

	</script>
		
		
</body>
</html>

 

koukou0419
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
微信小程序 - 最新图片组拖拽排序更换位置功能，类似微信朋友圈九宫格图片的拖动排序效果，微信小程序实现九宫格图片拖拽调换位置，小程序详细实现图像拖曳拖动切换位置排序功能（详细示例代码，一键复制开箱即用
高级前端工程师
04-01 2826
微信小程序，wechat，小程序，图片排序，图像排序，九宫格拖拽排序，拖曳，拖动，拖拽，仿微信朋友圈，朋友圈宫格图片排序，微信朋友圈图片拖动排序效果，实现九宫格图片拖拽，图像拖拽排序组件插件，小程序实现拖拽图片切换图片位置，图片拖动互换位置，图像拖拽切换位置，九宫格图片组合拖动排序，交换九宫格图片的位置，小程序上传图片后,如何实现拖拽排序功能，小程序怎么实现图片拖拽排序，微信小程序图片上传，九宫格拖拽组件，选择图片并拖动_微信小程序图片拖拽，微信小程序长按拖拽排序，图像的拖拽移动，多图拖拽排序功能，实现九宫
vue2/3 - 基于element(ui/plus)实现el-table表格每行可拖动换位置排序，表格列（表头）可拖动交换位置功能效果（table表格可拖曳排序的行和列，用鼠标动态拖拽排序表格行列）
最新发布
高级前端工程师
03-26 2785
vue2，element ui，vue3，element-plus，el-table，Table表格组件，vue+element表格table拖曳排序行和列，vue +element ,el-table实现行和列拖拽排序，table 行、列拖拽，vue3+element plus表格行列实现拖拽排序，可拖拽移动列和动态排序字段，表格拖拽排序，vue+element表格table让表头列拖动换位置，Table表格实现自定义表头展示+表头拖拽排序，表头c可以拖动交换位置，表头拖拽调整顺序，表格每行可以用鼠标拖着
WPF TreeView拖动排序拖拽排列
baoolong的博客
12-14 3461
最近工作中要用Treeview进行拖动排序，但是呢，网上几乎没有相关的Demo示例等，只能自己手撸，在这过程中，也学到了一些知识，我在此记录下，防止下次用到，或者需要的小伙伴用到。 本文代码实现简单，扩展性强，Demo示例总共也就267行，代码还包含了数据初始化，View控件初始化等非逻辑代码，代码简单以维护。
javascript实现漂亮的拖动层，窗口拖拽特效
10-24
本文介绍了如何使用JavaScript实现一个可拖动、可改变大小、并且具备关闭、最小化、最大化、还原功能的网页弹出层。该弹出层不仅外观美化，功能丰富，而且代码简洁实用，非常适合网页设计者在设计网页特效时参考学习...
Unity 从UI中拖拽对象放置并拖动效果
04-21
在Unity游戏引擎中，创建一个从用户界面(UI)中拖拽对象并实现平滑放置与拖动的效果是一项常见的交互设计。这个过程涉及到多个关键的技术点，包括UI元素的设置、碰撞检测、C#脚本编写以及物体的动态更新。下面我们将...
针对后台列表table拖拽比较实用的jquery拖动排序
10-21
在进行拖拽排序功能开发时，jQuery 主要用于基础的 DOM 操作和事件处理，而 jQuery UI 提供了排序功能的实现。 #### 2. 拖拽排序的实现原理 拖拽排序通常依赖于 JavaScript 的事件监听机制，例如 mousedown、...
Echarts的地图实现拖拽缩放同步功能（解决多层geo缩放、拖动卡顿问题）
06-14
Echarts的地图实现拖拽缩放同步功能（解决多层geo缩放、拖动卡顿问题），大屏项目显示云南省3D的地图，可拖拽缩放、地图打点、点击图标弹框等等功能。 ## 使用 - 启动调试服务: `npm start` - 构建 dist: `npm run ...
WeChatDemo:微信朋友圈,发表微信,朋友圈拖动删除图片,拖拽删除图片，拖拽排序
05-19
本篇将深入解析如何利用Objective-C编程语言，实现“微信Demo”中的朋友圈照片拖动删除及拖拽排序功能。这一功能为用户提供了直观且便捷的操作体验，尤其在处理多张图片时显得尤为重要。 首先，我们需要明确项目的...
input输入框的事件onblur/onchange
koukou0419的博客
06-02 3201
用户名：<input type="text" className="one" value="请输入用户名" style="color:#424242" onblur="if(this.value==''){this.value='请输入用户名';this.style.color='#424242'}" onfocus="if(this.value=='请输入用户名'){this.value...
判断对象类型的三种方法
koukou0419的博客
06-02 2623
//A instanceof B //判断A对象是不是B构造出来的 //判断A对象的原型链上有木有B function Person(){} var person=new Person(); var obj={}; console.log(person instanceof Person);//true console.log(person instanceo...
实现获取某个节点的所有子元素节点，不能使用children属性(nodeType)
koukou0419的博客
06-02 1575
//函数封装 //实现获取某个节点的所有子元素节点，不能使用children属性 var div=document.getElementsByTagName('div')[0]; function retElementChild(node){ var temp={ length:0, push:Array.prototype.push, splice:Array.prototype.splic...
Ajax.js
koukou0419的博客
06-02 1442
function Ajax(url,fnSucc,fnFail){ //1.创建Ajax对象 //以属性的形式定义避免报错 if (window.XMLHttpRequest) { var oAjax = new XMLHttpRequest(); } //IE6 else { var oAjax = ActiveXObject("Microsoft.XMLHTTP") } /...
随鼠标移动事件
koukou0419的博客
06-02 933
<!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-Compa...
oncontextmenu右键取消默认事件
koukou0419的博客
05-10 815
<!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-Compa...
点击button顺序生成li并把input里面的值变成li的内容
koukou0419的博客
06-02 733
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin:0px; padding:0; } .active...
取消冒泡 event.stopPropagation()
koukou0419的博客
05-10 663
//点击事件，就算子元素没绑定点击事件，父元素有绑定，当点击子元素的时候，也同样会出现冒泡事件， //取消冒泡事件 //事件对象，每个事件处理函数里面可让系统传一个事件对象给该函数,事件对象上有个方法取消冒泡函数event.stopPropagation(); div.onclick=function(e){ //e.stopPropagation(); //e.cancelB...
float浮动副作用及其如何清除
koukou0419的博客
05-30 553
1.浮动产生的现象？ 1.脱离标准文档流，不占页面位置 2.文字环绕，设置浮动属性的初衷 3."贴边"现象，设置浮动属性后，首选找有浮动盒子的边找到了就会贴到浮动盒子的边上，若找不到，则找父元素的边 4.收缩现象，只显示内容的宽度， 5.撑不起盒子的高度 3.父元素清除子元素产生的浮动影响？ 1.给父元素设置固定宽高(不灵活，后期不易维护) 2.内墙法：给最后一个浮动元素的后面添加一个空的【块级...
android长按拖动拖拽 多张
06-10
您好，针对您的问题，我理解您想实现在 Android 应用中，用户可以通过长按某个元素并拖动，实现多张图片的拖拽和拖放。我可以为您提供以下思路和代码示例： 首先，您需要为每一张图片设置一个触摸事件，以便用户可以通过长按并拖动图片。例如，在您的布局文件中，可以为每个图片添加如下代码： ```xml <ImageView android:id="@+id/image1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/image1" android:tag="draggable" android:longClickable="true" android:onLongClick="onLongClickImage" /> ``` 其中，`android:tag="draggable"` 表示该元素可以被拖拽，`android:longClickable="true"` 表示该元素可以被长按，`android:onLongClick="onLongClickImage"` 表示当用户长按该元素时，会调用 `onLongClickImage` 方法。 接下来，您需要实现 `onLongClickImage` 方法，以便能够在用户长按图片时启动拖拽事件。例如，可以使用 `View.OnLongClickListener` 接口来实现该方法： ```java public class MainActivity extends AppCompatActivity implements View.OnLongClickListener { private ImageView mSelectedImage; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); // 为每个图片添加长按事件 findViewById(R.id.image1).setOnLongClickListener(this); findViewById(R.id.image2).setOnLongClickListener(this); findViewById(R.id.image3).setOnLongClickListener(this); } @Override public boolean onLongClick(View v) { // 记录选中的图片 mSelectedImage = (ImageView) v; // 启动拖拽事件 View.DragShadowBuilder shadowBuilder = new View.DragShadowBuilder(v); v.startDragAndDrop(null, shadowBuilder, null, 0); return true; } } ``` 在这个例子中，当用户长按某个图片时，会记录选中的图片并启动拖拽事件。拖拽事件使用 `View.startDragAndDrop` 方法来启动，并使用 `View.DragShadowBuilder` 创建一个拖拽的阴影。 最后，您需要实现 `View.OnDragListener` 接口来处理拖拽事件。例如，可以使用以下代码来实现： ```java public class MainActivity extends AppCompatActivity implements View.OnLongClickListener, View.OnDragListener { private ImageView mSelectedImage; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); // 为每个图片添加长按事件 findViewById(R.id.image1).setOnLongClickListener(this); findViewById(R.id.image2).setOnLongClickListener(this); findViewById(R.id.image3).setOnLongClickListener(this); // 设置拖拽事件 findViewById(R.id.container).setOnDragListener(this); } @Override public boolean onLongClick(View v) { // 记录选中的图片 mSelectedImage = (ImageView) v; // 启动拖拽事件 View.DragShadowBuilder shadowBuilder = new View.DragShadowBuilder(v); v.startDragAndDrop(null, shadowBuilder, null, 0); return true; } @Override public boolean onDrag(View v, DragEvent event) { switch (event.getAction()) { case DragEvent.ACTION_DRAG_STARTED: // 拖拽事件开始，返回 true 表示可以接收拖拽事件 return true; case DragEvent.ACTION_DRAG_ENTERED: // 拖拽事件进入容器，改变容器的背景色 v.setBackgroundColor(Color.YELLOW); break; case DragEvent.ACTION_DRAG_EXITED: // 拖拽事件离开容器，恢复容器的背景色 v.setBackgroundColor(Color.TRANSPARENT); break; case DragEvent.ACTION_DROP: // 拖拽事件释放，将图片从原位置移动到容器中 ViewGroup viewGroup = (ViewGroup) mSelectedImage.getParent(); viewGroup.removeView(mSelectedImage); ((ViewGroup) v).addView(mSelectedImage); break; case DragEvent.ACTION_DRAG_ENDED: // 拖拽事件结束，恢复容器的背景色 v.setBackgroundColor(Color.TRANSPARENT); break; } return true; } } ``` 在这个例子中，当用户将图片拖拽到容器中时，会将图片从原位置移动到容器中。您可以根据需要修改代码，实现更复杂的拖拽和拖放功能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值