JS设置拖动功能

一时失言乱红尘 2022-10-11 01:12 203阅读 0赞

设置拖动功能可以提高用户的操作体验，如果使用 `bootstrap` 框架可以参考以下代码：

// modal 拖动
    	$(document).on('mousedown', '.modal-dialog', function(e){ 
    		var x = e.pageX;
    		var y = e.pageY;
    		var $modal = $(this);
    		var top = parseInt($modal.css('top'));
    		var left = parseInt($modal.css('left'));
    
    		$(document).on('mousemove', function(e){ 
    			var xx = e.pageX;
    			var yy = e.pageY;	
    
    			$modal.css({ 
    				top: top+yy-y+'px',
    				left: left+xx-x+'px'
    			})
    		})
    	})
    	$(document).on('mouseup', function(){ 
    		$(document).off('mousemove')
    	})

如果是一般的元素，需要在特定的区域可以拖动，拖动父级元素的区域，可以参考以下代码：

// 拖动功能设置 
    	// setMove('.btn', '.box', {top: 'margin-top', left: 'margin-right'})
    	function setMove(moveBtn, moveBox, css){ 
    		$(document).on('mousedown', moveBtn, function(e){ 
    			var x = e.pageX;
    			var y = e.pageY;
    			var $box = $(this).parents(moveBox);
    			var top = parseFloat($box.css(css.top));
    			var left = parseFloat($box.css(css.left));
    
    			$(document).on('mousemove', function(e){ 
    				var xx = e.pageX;
    				var yy = e.pageY;	
    
    				var cssVal = { };
    				cssVal[css.top] = top+yy-y+'px';
    				cssVal[css.left] = left+xx-x+'px';
    				$box.css(cssVal);
    			})
    		})
    		$(document).on('mouseup', function(){ 
    			$(document).on('mousemove', null);
    			$(document).off('mousemove');
    		})
    	}

发表评论取消回复

表情：

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

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

相关阅读

相关 vue拖动功能

一、拖动组件vuedraggable： npm install vuedraggable <template> <vuedraggable class

约定不等于承诺〃/ 2023年03月05日 15:58/ 0 赞/ 36 阅读

相关 js设置div在body中可以任意拖动

js代码： function dragFunc() { var Drag = document.getElementById(divId);

以你之姓@/ 2022年12月19日 15:24/ 0 赞/ 189 阅读

相关设置div随意拖动

/ 设置div随意拖动 start / var dragging = false; var iX, iY; $("divID").m

客官°小女子只卖身不卖艺/ 2022年11月14日 10:16/ 0 赞/ 203 阅读

相关 JS设置拖动功能

设置拖动功能可以提高用户的操作体验，如果使用 `bootstrap` 框架可以参考以下代码： // modal 拖动 $(document).on('mou

一时失言乱红尘/ 2022年10月11日 01:12/ 0 赞/ 204 阅读

相关 js表格拖动排序

原来从网上找的，使用了一段时间，后来发现还有jquery控件，直接使用了！jquery.tablednd\_0\_5.js 非js库的js表格拖动代码 <

超、凢脫俗/ 2022年08月12日 16:22/ 0 赞/ 247 阅读

相关广告区域的拖动功能

广告区域的拖动功能就是一块可以拖动的可以放置广告的地方。其中关键点在于鼠标的三个事件onmousedown，onmousemove和onmouseup。另外一个关键点在于获取鼠

快来打我*/ 2022年05月19日 08:55/ 0 赞/ 251 阅读

相关 js分隔条实现拖拽功能(支持左右拖动)

这次记录就不贴代码了，只是记录一下原理和思路，因为代码封装的太严格，所以不好拿出来。 lz的页面是左右各一个分隔条实现拖拽的，左边是框架自带一个功能没问题，右边是lz模仿做的

Love The Way You Lie/ 2022年04月08日 08:18/ 0 赞/ 684 阅读

相关 html js设置div可拖动效果

第一种：先看代码，可直接复制使用。这部分是我找了个例子，看了一遍，自己写的。但是也有一些问题。问题：js设置div可拖动效果当我在实际项目中使用时，div里有关闭d

灰太狼/ 2022年03月17日 12:52/ 0 赞/ 665 阅读

相关 js拖动按钮

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

迷南。/ 2021年09月08日 15:14/ 0 赞/ 338 阅读

相关 js 鼠标拖动div

div中心跟踪鼠标动而动得到鼠标坐标，移动时div的左上距离为鼠标两坐标减去div左上顶点到中心的距离 div任意位置随鼠标动而动得到鼠标第一次坐标，移动时div

忘是亡心i/ 2021年07月24日 17:05/ 0 赞/ 505 阅读