前端插件之拖拽

阳光穿透心脏的1/2处 2022-06-09 08:22 385阅读 0赞

1.拖拽的插件很多，其实我们只要明白他的原理，就不难了：

之所以形成拖拽的效果，是在鼠标按下onmousedown的时候记录鼠标坐标与被拖拽div左边界，上边界的距离disX，disY，在拖动onmousemove的时候，讲拖动时鼠标的x坐标oEv.clientX-disX;得到的这个值应该是拖动情况下，div的left；同理，投票也是：

2.js代码：

var oBox=document.getElementById('box');
    	var oPut=oBox.getElementsByTagName('input')[0];
    	
    	 oBox.οnmοusedοwn=function(ev){
    		 oEv=ev || window.event;
    		 var disX=oEv.clientX-oBox.offsetLeft;
    		 var disY=oEv.clientY-oBox.offsetTop;
    		 
    		document.οnmοusemοve=function(ev){
    			oEv=ev || window.event;
    			//console.log(oEv.clientX,oEv.clientY)
    			var w=oEv.clientX-disX;
    			var h=oEv.clientY-disY;
    			oBox.style.left=w+"px";
    			oBox.style.top=h+"px";
    			
    			if(w>document.documentElement.clientWidth-oBox.offsetWidth){
    				oBox.style.left=document.documentElement.clientWidth-oBox.offsetWidth+'px';
    			};
    			if(w<0){
    				oBox.style.left="0";
    			};
    			if(h>document.documentElement.clientHeight-oBox.offsetHeight){
    				oBox.style.top=document.documentElement.clientHeight-oBox.offsetHeight+'px';
    			};
    			if(h<0){
    				oBox.style.top="0";
    			};
    		};
    		 oBox.οnmοuseup=function(){
    			 document.οnmοusemοve=null;
    		};
    	};
    	//---------------------------	
    	oPut.οnmοusedοwn=function(ev){
    		oEv=ev || window.event;
    		oEv.cancelBubble=true;
    	};

2.html代码：

<div id="box">
    <input type="text">

3.css代码，当然很简单

\*\{margin:0;padding:0;\}  
\#box\{width:200px;height:200px;background:\#ccc;position:absolute;\}

发表评论取消回复

表情：

评论列表（有 0 条评论，385人围观）

还没有评论，来说两句吧...

相关阅读

相关前端------拖拽事件

拖拽事件在H5中实现了拖拽技术，允许用户在网页内部拖拽以及浏览器与其他应用程序之间的拖拽，通过拖拽可以传递数据。放置元素:默认是不可以放置得取消默认行为 even

阳光穿透心脏的1/2处/ 2024年04月07日 11:39/ 0 赞/ 46 阅读

相关拖拽控件

如果我们想用WPF实现一个拖拽的效果，就像VS的工具箱那样的，怎么做？首先我们分析下整个步骤： ①用户单击源元素，并保持鼠标键为按下状态，启动拖放操作。 ②用户将鼠标移

向右看齐/ 2023年12月11日 07:56/ 0 赞/ 126 阅读

相关 web移动端-实现拖拽的插件 IScroll

在项目工程中，如果自己手动实现拖拽是比较费时间的，所以使用 IScroll插件可以解决这个问题； IScroll插件下载zip后进行解压，在文件夹build里面引入iscr

逃离我推掉我的手/ 2022年12月23日 06:17/ 0 赞/ 162 阅读

相关简单实用的jQuery列表拖拽排序插件

[下载地址![icon-default.png?t=L892][icon-default.png_t_L892]/images/20220828/882ae5ed857f484

你的名字/ 2022年09月11日 03:29/ 0 赞/ 172 阅读

相关 jQuery上下拖拽排序插件

[下载地址][Link 1]jQuery上下拖拽排序插件是一款通过鼠标拖动上下层排序，编辑按钮等操作代码。 ![1631204112.png][] dd: [Link

雨点打透心脏的1/2处/ 2022年09月11日 00:14/ 0 赞/ 146 阅读

相关 jQuery拖拽div层和图片插件

[下载地址][Link 1]一款不错的jQuery拖拽插件，用这个插件可以在网页上任意拖拽元素，比如div层或者图片，更不错的是，我们可以控制其拖拽的方向，比如只允许水平拖拽和

超、凢脫俗/ 2022年09月10日 14:21/ 0 赞/ 163 阅读

相关 easyui的dnd插件实现datagrid行拖拽

项目中出现一种需求：对某列表中元素进行手动排序，若使用按钮单击来向上或者向下效率低下，若直接手动输入序号更不科学=.=。因此最好的方式就是能够实现手动拖动某个行到想要的位置

快来打我*/ 2022年08月03日 13:54/ 0 赞/ 264 阅读

相关前端插件之拖拽

1.拖拽的插件很多，其实我们只要明白他的原理，就不难了：之所以形成拖拽的效果，是在鼠标按下onmousedown的时候记录鼠标坐标与被拖拽div左边界，上边界的距离disX

阳光穿透心脏的1/2处/ 2022年06月09日 08:22/ 0 赞/ 386 阅读

相关 flex组件拖拽

[为什么80%的码农都做不了架构师？>>> ][80_] ![hot3.png][] <? xml version ="1.0" encoding ="utf-8" ?>

绝地灬酷狼/ 2022年01月15日 13:23/ 0 赞/ 211 阅读

相关 flex组件拖拽

[为什么80%的码农都做不了架构师？>>> ][80_] ![hot3.png][] <? xml version ="1.0" encoding ="utf-8" ?>

た入场券/ 2022年01月15日 13:21/ 0 赞/ 221 阅读