div拖拽 原理: 鼠标事件 mousedown mousemove mouseup 注意事项: 被拖动的div的position属性值一定是absolute。 如果被拖动的div上有文字会有自带的文字拖动效果,需要将改div上的所有拖动事件绑定在该div上,可以使用setCapture。 代码: html&css: <! position: absolute; color: #fff; } </style> </head> <body> <div id="test">4616125</div> </body> </html> js /* * @Author: lee * @Date: 2018-07-10 11:40:31 * @Last
DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>原生js拖拽效果</title > </head> <body> <div id="box"></div> <script type="text/javascript
热卖云产品新年特惠,2核2G轻量应用服务器9元/月起,更多上云必备产品助力您轻松上云
转自: http://www.cnblogs.com/yushang/archive/2013/03/19/2968782.html 想让div实现拖拽改变大小功能,类似于soso地图(即现在的腾讯地图 )的看街景时地图可以拖拽等功能 ? 那么找到相应的js事件:mousedown、mousemove、mouseup 找到这几个事件,基本上我们的功能可以说完成了一半了,只需要在里面做相应事件处理就能搞定了,具体看下代码,很简单的操作: 拖拽 div <! v=v3.3.805"); background-position: 0px 0px;"> </div> </div>
document.onmousemove = function (ev) { const _e = ev || e //移动时,鼠标距离当前窗口x轴坐标 - 鼠标在拖拽元素的坐标 = 剩下距离body的x轴坐标 //将这个数值设置为拖拽元素的left、top let boxLeft = _e.clientX - distanceX; const clientWidth = document.documentElement.clientWidth || document.body.clientWidth //限制拖拽宽高 mainDiv.style.top = boxTop + 'px' mainDiv.style.left = boxLeft + 'px' } // 鼠标松开事件 结束拖拽
一个简单的可拖动div,随着鼠标的移动,实现原理鼠标按下时根据onmousemove事件来动态获取鼠标坐标位置以此来更新div的位置,实现的前提时div要有一个定位效果,不然的话是移动不了它的。 class="box"></div> 首先先分析一下需求,这个需求就是点击时鼠标按下你才能移动并改变div在页面中的位置。 ;//移动状态的判断鼠标按下才能移动 e.clientX鼠标x轴的位置, e.clientY鼠标Y轴的位置, box.offsetLeft获取div距离左边的距离, box.offsetTop获取div isDrop = false;//设置为false不可移动 } 现在div已经可以拖拽了,目前还需要添加一个范围限定,不然div会拖到页面外面去,这样不行的所以得添加范围限定。 div最大移动宽度为页面宽减去div的宽,最小为零,最大高为页面高减去div的高,最小为零。
接着鼠标拖拽div(1)解决问题,当在拖拽事件所在的页面按下键盘的ctrl+A全选后,再去拖拽div,浏览器会默认去搜索网页中的内容,拖拽功能就会失效,(搜索网页内容是浏览器的默认行为,所以要想不发生这种情况 可以将setCapture()方法用到鼠标拖拽div的例子中,但是注意,在给mousedown事件中,调用的box的**setCapture()方法之后,会有一个问题,就是当鼠标松开之后,事件还会一直被捕获 ,网页中的其他选项都无法点击,而且就算鼠标松开,div也还会跟着鼠标对应的位置移动,为了解决这个问题,就需要在鼠标松开的时候取消捕获,可以使用releaseCapture()**方法来取消先前调用的捕获方法 优化拖拽代码 在之前拖拽div的代码中,如果要拖拽多个内容,就需要重新为一个内容绑定事件,所有的操作都要重新写一遍,所以对之前的代码进行了优化: 定义函数,将拖拽的方法封装起来,方便调用,要拖拽哪个元素 id="box"></div> <div id="box1"></div> </body> </html> 发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/
/*js拖拽逻辑: 第一:为什么要定位? 因为 ? 往左往上left top要定位的哈 第二:为什么点击down包括着移动move与抬起up. 因为代表这三个是不独立的. 因为鼠标移动是在document移动,点击是在div上点击.其实一句话,鼠标移动div跟着移动而已. */ 核心代码: ? 代表着鼠标到可视区-div到可视区===div到可视区. ? 代表了***移动后的***的鼠标到可视区的----div到鼠标的距离. 鼠标是400.那样的话,400-(150-100)=350.就是div所在的位置.也就是move后的位置. js拖拽: <! id="<em>div</em>"></div> <script type="text/javascript"> div.onmousedown=function(cyg) { var ev=cyg||
开发了那么久,对于js实现拖拽多少都写过,用于实际项目却没有。 先看一下之前写的: 如果鼠标慢慢移动,拖拽是没有任何问题的,如果速度快了,那么鼠标和元素就会分离。 html, body{ width:100%; height:100%; } </style> </head> <body> <div id="box"></div> <script> var el = document.getElementById('box'); el.addEventListener('mousedown
utf-8"> <title></title> <style type="text/css"> *{margin:0;padding: 0;;list-style: none;} #div id='div'></div> <script type="text/javascript"> div.onmousedown = function(e){ var ev = e || event ; var l = ev.clientX - div.offsetLeft;//获取到div到div的鼠标之间的距离. div.style.left = ev.clientX - l+ 'px';//移动后的鼠标(350 350)减去down时候的div到div的鼠标之间(150-100=50)的距离.等于左上角在哪里。 鼠标在div里·,就是300+50=350啊。
IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>原生JS拖拽 background: red; cursor: move; } </style> </head> <body> <div class="box" id="drag"></div> </body> </html> <script> window.onload = function () { // 获取拖拽的节点 let drag = document.getElementById('drag') // console.log(drag); // 按下别拖拽对象的时候
的控件,GridView主要是来显示网格的控件,在Android的开发中使用很普通,相对于TextView,Button这些控件来说要来的复杂些,今天给大家带来长按GridView的item,然后将其拖拽其他 GridView的拖动的Demo,但是大部分都是相同的,而且存在一些Bug,而且大部分都是点击GridView的item然后进行拖动,或者item之间不进行实时交换,今天给大家更加详细的介绍GridView拖拽 position */ private int mDragPosition; /** * 刚开始拖拽的item对应的View */ private item显示出来,这样子就实现了GirdView的拖拽效果啦,接下来我们来使用下我们自定义可拖拽的GridView吧,先看主界面布局,只有我们自定义的一个DragGridView <RelativeLayout 好了,今天的讲解就到此结束,效果还不错吧,看完这篇文章你是不是觉得GridView拖拽也不是那么难实现呢?
<div style="width:80%; margin-left:auto; margin-right:auto;"> 滚动条 <div style="position:absolute; height :400px; overflow:auto"></div> div 设置滚动条显示:overflow :yes div 设置滚动条自适应显示:overflow :auto div 设置上下滚动条显示:overflow-y :yes div 设置上下滚动条自适应显示:overflow-y :auto 如果该div被包含在其他对象例如td中,则位置可设为相对:position:relative
最近做的项目要用到拖拽排序,我现在的项目是vue项目,所以我就屁颠屁颠的去百度有木有这样功能的插件,我就知道一定会有,那就是vuedraggable,这是一款很棒的拖拽插件,下面我来说一下怎么引入 首先在 <draggable v-model="colors" @update="datadragEnd" :options = "{animation:500}"> <transition-group> <div <draggable v-model="colors" @update="datadragEnd" :options = "{animation:500}"> <transition-group> <div <draggable v-model="colors" @update="datadragEnd" :options = "{animation:500}"> <transition-group> <div evt.oldIndex) console.log('拖动后的索引 :' + evt.newIndex) console.log(this.colors); } }, mounted () { //为了防止火狐浏览器拖拽的时候以新标签打开
自己一直很想做个拖拽生成静态页面的东西,说简单也简单,这个东西按道理用jsx语法是最好的,用render方法渲染生成的json。只是自己对这块还是没信心。 今天写个vue的拖拽指令,顺便理一下offsetX、pageX、clientX、screenX这几个属性,一直记不住。 搞明白了这几个相对的距离,就比较容易计算拖拽的距离了。 很早之前就分享过拖拽的一个简单demo,拖拽指令也很简单 Vue.directive('draggable', { inserted: function (el,data) { el.style.position 使用的时候: <div v-draggable>请拖拽</div> 这是最基础版的,不同需求可能会有不一样的条件,比如移动的距离是否可以小于0,或者限制在某个相对定位relative框里面,这时候是否限制最大最小的移动距离
(tbody, { animation: 150, //动画 handle: ".move", //指定拖拽目标,点击此目标才可拖拽元素(此例中设置操作按钮拖拽) filter /** * 在做列拖拽功能时发现问题:表头位置错乱,但是内容列正常 * 于是我给el-table绑定key,每次拖拽结束改变key触发表格重新渲染 * 但引出新的问题:表格重渲拖拽事件丢失,导致之后无法拖拽 * 于是我在表格重渲之后重新调用拖拽方法创建拖拽实例,功能正常 * **/ this.key important; } </style> 3.实际使用 <template> <div class="container"> <el-table :data="tableData small">{{ scope.row.del }}</el-button> </template> </el-table-column> </el-table> </div
点击可以进行拖拽。 ? 基于上一篇博客:https://blog.csdn.net/acoolgiser/article/details/84866426 实现。 代码: <template> <div id="eagleMapContainer" title=""> <div id="eagleMap"> <l-map> </l-map> </div> <div id="tz" @mousedown ="dragEagle"> <div title="拖动调整大小" id="move_tz"></div> </div> </div 注:拖拽箭头是利用鼠标拖动的地方是div的右上方,所以箭头是右上方向的箭头,即设置div的css中的属性为cursor: ne-resize; 参考http://www.w3school.com.cn/
腾讯云微搭低代码 WeDa 是高效、高性能的拖拽式低代码开发平台,向上连接前端的行业业务,向下连接云计算的海量能力,助力企业垂直上云。微搭将繁琐的底层架构和基础设施抽象化为图形界面,通过行业化模板、拖放式组件和可视化配置快速构建小程序、H5应用、Web应用等多端应用,免去了代码编写工作,让您能够完全专注于业务场景。
扫码关注腾讯云开发者
领取腾讯云代金券