js drag & drop实现拖拽

JavaScript010

js drag & drop实现拖拽,第1张

1.先在元素上添加属性 <div draggable="true"></div>,定义了这个属性后就可以注册拖动的事件了

2.拖动事件:

开始拖动时dragstart

进行拖动时drag

结束拖动时dragend

3.拖拽区域触发事件:

拖拽元素进入区域时触发dragenter

拖拽元素进入区域后悬停触发dragover

拖拽元素离开区域时触发dragleave

拖拽元素放置时触发drop

一般进度条这个功能的限制是由于js引起的。所以修改js文件就可以了。由于在线修改的话,浏览器一刷新的话,修改内容又恢复了,所以我们需要一个映射的插件。下载ReRes插件,可以用来映射js,就是说可以把原本运行在其它服务器下的js文件转换成你本机电脑下的js,来达到一些想实现的原本被限制的功能。

经过我实际测试,那个不可拖动的进度条是由js来完成的,首先打开视频然后暂停,必须暂停不然不好修改,按下f12定位到视频的进度条body >div.shadow-box >div.preview-video >div.video-duration.unfullscreen,里面有一个百分数<div class="video-watch-to" style="height: 10pxbackground-color: rgb(150, 150, 150)cursor: pointerwidth: 100%"></div>改成这样,然后点一下视频进度条的末尾再按播放等视频自己放完,然后你会发现,经验到手,再次打开视频已经可以拖进度了.