设置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如果指 ...
随机推荐
- 解答WPF中ComboBox SelectedItem Binding不上的Bug
正在做一个打印机列表,从中选择一个打印机(System.Printing) <ComboBox Width="150" ItemsSource="{Binding ...
- [MetaHook] Quake Bink function
If you want to play Bink video in game, maybe you need this code. QBink.h #ifndef QBINK_H #define QB ...
- Canvas 教程
在本文章中 在你开始之前 教程内容 相关资料 A note to contributors <canvas> 是一种可以通过编写脚本(通常是JavaScript)来实现绘制图形的HTML元 ...
- [BZOJ2753][SCOI2012]滑雪与时间胶囊(特殊的有向树形图)
题目:http://www.lydsy.com:808/JudgeOnline/problem.php?id=2753 分析: 第一问:直接BFS扩展知道无法扩展 第二问: 看似就是最小树形图啊= = ...
- [1015][JSOI2008]星球大战starwar(并查集)
1015: [JSOI2008]星球大战starwar Time Limit: 3 Sec Memory Limit: 162 MBSubmit: 2124 Solved: 909[Submit] ...
- AngularJS - 快速入门
刚开始接触时总是去wiki或各种百科以了解一番. 它们会告诉我一些MVVM.双向数据绑定.依赖注入等等名词,觉得这些名词好上档次,然后我很可能就不打算用这个东西了. AngularJS是什么? 完全使 ...
- NOI题库
07:机器翻译 总时间限制: 1000ms 内存限制: 65536kB 描述 小晨的电脑上安装了一个机器翻译软件,他经常用这个软件来翻译英语文章. 这个翻译软件的原理很简单,它只是从头到尾,依次将每个 ...
- 2-SAT开坑
Reference:http://blog.csdn.net/jarjingx/article/details/8521690 其中伍昱的ppt不错. 2SAT最裸的模型: 一国有n个党派,每个党派在 ...
- [IOS UIalert模版]
1.alertview创建 UIAlertView *alert; alert = [[UIAlertView alloc] initWithTitle:@"提示" message ...
- CF Gym 100685A Ariel
传送门 A. Ariel time limit per test 2 seconds memory limit per test 256 megabytes input standard input ...