设置dom元素可拖动,支持ie5+
摘要:
最近在项目中要做一个图片预览的功能,这时候会遇到用户上传很大的图片,已经超出视图界面。最终决定做一个在固定宽和高的位置,用户可以拖动图片查看。所以自己就写了一个支持ie5+,chrome,Firefox,opera等浏览器的可拖动dom元素的插件。
项目地址:https://github.com/baixuexiyang/drag
实例:
var drag = new Drag("test", {
onStart: function(){
},
onMove: function(){
document.getElementById('position').innerHTML = '距离左边:' + drag.getPositions().left + ';距离顶部:' + drag.getPositions().top;
},
onStop: function(){
}
});
设置dom元素可拖动,支持ie5+的更多相关文章
- JavaScript Dom基础-9-Dom查找方法; 设置DOM元素的样式; innerHTML属性的应用; className属性的应用; DOM元素上添加删除获取属性;
JavaScript Dom基础 学习目标 1.掌握基本的Dom查找方法 domcument.getElementById() Domcument.getElementBy TagName() 2.掌 ...
- Vue动态设置Dom元素宽高
需求: slider侧边栏是宽度是动态的,使用jquery可以操作dom元素,设置宽高,但vue是避免操作dom的 <template> <div class="slide ...
- 关于Cefsharp无法拖动Dom元素的解决方法
如图所显示,Cefsharp在嵌入网页,页面有对Dom元素的拖动的操作,独立在浏览器上对网页元素的拖动是没有问题的,但是嵌入到Cefsharp上显示禁用的图标.排查了H5的代码,没有写入禁用拖动的操作 ...
- 【使用 DOM】为DOM元素设置样式
1. 使用样式表 可以通过document.styleSheets属性访问文档中可用的CSS样式表,它会返回一组对象集合,这些对象代表了与文档管理的各个样式表. 每个样式表 都由一个CSSStyleS ...
- 【温故而知新-Javascript】为DOM元素设置样式
1. 使用样式表 可以通过document.styleSheets属性访问文档中可用的CSS样式表,它会返回一组对象集合,这些对象代表了与文档管理的各个样式表. 每个样式表 都由一个CSSStyleS ...
- 实现dom元素拖动
本文主要写一下如何实现dom元素拖动,目前使用jquery库实现之. 主要的注释附在代码中,大家可以根据代码画一个小的窗口模型图,以便于理解. <!DOCTYPE html> <ht ...
- jQuery支持移动Mobile的DOM元素移动和缩放插件
jQuery Panzoom是一款很有用的HTML DOM元素平移和缩放jQuery和CSS3插件. Panzoom利用CSS transforms 和 matrix函数来为浏览器进行硬件(GPU)加 ...
- vue获取DOM元素并设置属性
这里我想到了2个方法: 方法一: 直接给相应的元素加id,然后再document.getElementById("id");获取,然后设置相应属性或样式 方法二: 使用ref,给相 ...
- DOM元素属性值如果设置为对象
结论:内部会调用toString方法,将设置的对象转换为字符串添加给相应的属性: 这个问题呢,是通过jQuery的each方法中,回调函数的this指向问题而来: 我们知道,回调函数中的this如果指 ...
随机推荐
- ThreadLocal详解
ThreadLocal翻译成中文比较准确的叫法应该是:线程局部变量. 这个玩意有什么用处,或者说为什么要有这么一个东东?先解释一下,在并发编程的时候,成员变量如果不做任何处理其实是线程不安全的,各个线 ...
- Unity3D 游戏计时功能实现
最近工作实在是太忙了,没办法认真写博客,但是还是要好好记录下日常的学习. 需求 各类游戏中都大量运用到计时功能,不管是直接显示的在前端UI,还是后台运行. 思路 Unity中提供了Time类可以方便的 ...
- Fiddler工具的基本功能
Fiddler是一款用于网页数据分析,抓取的工具,里面集成了对网页强大的功能外,还可以通过设置,使其对手机的数据也可以进行抓取 Fiddler的原理是: 通过在客户端和服务器之间创建一个代理服务器来对 ...
- JS中decodeURI()与decodeURIComponent()区别
decodeURI()定义和用法:decodeURI() 函数可对 encodeURI() 函数编码过的URI 进行解码. 语法:decodeURI(URIstring) 参数 描述:URIstrin ...
- [USACO2005][POJ3171]Cleaning Shifts(DP+线段树优化)
题目:http://poj.org/problem?id=3171 题意:给你n个区间[a,b],每个区间都有一个费用c,要你用最小的费用覆盖区间[M,E] 分析:经典的区间覆盖问题,百度可以搜到这个 ...
- [AaronYang]C#人爱学不学[5]
这世上有三样东西是别人抢不走的:一是吃进胃里的食物,二是藏在心中的梦想,三是读进大脑的书 --Aaronyang的博客(www.ayjs.net) 1. 数组-的疑惑? 1.1 多维数组 ...
- 【前端开发系列】—— CSS3属性选择器总结
想想自己为什么要学CSS,作为一个开发过前端的人员来说,调试一个图片花了半天的时间,最后发现分隔符用错了,实在是一件很丢人的事情.因此,痛下决心来学习CSS,最近一周也会更新下相关的学习笔记. CSS ...
- ie6下使用js替换img标签src属性图片不显示的错误
首先,我必须再次强调一下,F-U-C-K I-E! 其次,简单阐述一下这个bug的出现的情况.页面中有个<a href=”javascript:void(0)” onclick=”swapImg ...
- 使用quartz 定时任务
Quartz 是一个开源的作业调度框架,它完全由 Java 写成,并设计用于 J2SE 和 J2EE 应用中.它提供了巨大的灵活性而不牺牲简单性.你能够用它来为执行一个作业而创建简单的或复杂的调度. ...
- 【CodeForces 605A】BUPT 2015 newbie practice #2 div2-E - Sorting Railway Cars
http://acm.hust.edu.cn/vjudge/contest/view.action?cid=102419#problem/E Description An infinitely lon ...