摘要:

  最近在项目中要做一个图片预览的功能,这时候会遇到用户上传很大的图片,已经超出视图界面。最终决定做一个在固定宽和高的位置,用户可以拖动图片查看。所以自己就写了一个支持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+的更多相关文章

  1. JavaScript Dom基础-9-Dom查找方法; 设置DOM元素的样式; innerHTML属性的应用; className属性的应用; DOM元素上添加删除获取属性;

    JavaScript Dom基础 学习目标 1.掌握基本的Dom查找方法 domcument.getElementById() Domcument.getElementBy TagName() 2.掌 ...

  2. Vue动态设置Dom元素宽高

    需求: slider侧边栏是宽度是动态的,使用jquery可以操作dom元素,设置宽高,但vue是避免操作dom的 <template> <div class="slide ...

  3. 关于Cefsharp无法拖动Dom元素的解决方法

    如图所显示,Cefsharp在嵌入网页,页面有对Dom元素的拖动的操作,独立在浏览器上对网页元素的拖动是没有问题的,但是嵌入到Cefsharp上显示禁用的图标.排查了H5的代码,没有写入禁用拖动的操作 ...

  4. 【使用 DOM】为DOM元素设置样式

    1. 使用样式表 可以通过document.styleSheets属性访问文档中可用的CSS样式表,它会返回一组对象集合,这些对象代表了与文档管理的各个样式表. 每个样式表 都由一个CSSStyleS ...

  5. 【温故而知新-Javascript】为DOM元素设置样式

    1. 使用样式表 可以通过document.styleSheets属性访问文档中可用的CSS样式表,它会返回一组对象集合,这些对象代表了与文档管理的各个样式表. 每个样式表 都由一个CSSStyleS ...

  6. 实现dom元素拖动

    本文主要写一下如何实现dom元素拖动,目前使用jquery库实现之. 主要的注释附在代码中,大家可以根据代码画一个小的窗口模型图,以便于理解. <!DOCTYPE html> <ht ...

  7. jQuery支持移动Mobile的DOM元素移动和缩放插件

    jQuery Panzoom是一款很有用的HTML DOM元素平移和缩放jQuery和CSS3插件. Panzoom利用CSS transforms 和 matrix函数来为浏览器进行硬件(GPU)加 ...

  8. vue获取DOM元素并设置属性

    这里我想到了2个方法: 方法一: 直接给相应的元素加id,然后再document.getElementById("id");获取,然后设置相应属性或样式 方法二: 使用ref,给相 ...

  9. DOM元素属性值如果设置为对象

    结论:内部会调用toString方法,将设置的对象转换为字符串添加给相应的属性: 这个问题呢,是通过jQuery的each方法中,回调函数的this指向问题而来: 我们知道,回调函数中的this如果指 ...

随机推荐

  1. 高层次综合(HLS)-简介

    本文是我近段时间的学习总结,主要参考了Xilinx的技术文档以及部分网上其他资料.文档主要包括ug998<Introduction to FPGA Design Using High-Level ...

  2. Swift与Objective-c 混编CocoaPods 引入第三方库遇到的问题 (一)

    最近Swift 这么火也想尝试着用一下.考虑到Swift 出来的时间也不长.还有就是就是苹果更新的过于平凡 暂时还是不要将现有项目都用swift开发. 先来看看我遇到的问题: 问题一.

  3. Java问题:Quartz,Hibernate,Spring,Tomcat中定时任务无故停止,没有错误

    最近在做一个java项目的时候遇到一个十分奇怪的问题,想到大家可能也会遇到这样的问题,所以在此发出来,希望大家遇到的时候能够快速解决! 直入主题 问题:使用quartz进行定时任务自动执行的时候,用到 ...

  4. js回调

    请先看着一片blog: http://www.jb51.net/article/53027.htm 回调的两种使用方法: 1.一般的传函数.2.匿名函数 3.使用回调函数再使用call方法. 判断一个 ...

  5. [wikioi 1519]过路费(最小生成树+树链剖分)

    题目:http://www.wikioi.com/problem/1519/ 题意:给你一个连通的无向图,每条边都有权值,给你若干个询问(x,y),要输出从x到y的路径上边的最大值的最小值 分析:首先 ...

  6. jsonp与跨域

    <script>标签的src属性并不被同源策略所约束,所以可以获取任何服务器上脚本并执行. JSONP是JSON with Padding的略称.它是一个非官方的协议,它允许在服务器端集成 ...

  7. sql-in和not in

    IN .NOT IN这个指令可以让我们依照一或数个不连续 (discrete) 的值的限制之内抓出数据库中的值 in和not in in:存在与...里面的 not in:不存在与..里面的 其指令语 ...

  8. BZOJ1093 最大半连通子图

    Description 一个有向图G=(V,E)称为半连通的(Semi-Connected),如果满足:?u,v∈V,满足u→v或v→u,即对于图中任意 两点u,v,存在一条u到v的有向路径或者从v到 ...

  9. CodeForces 559C Gerald and Giant Chess

    C. Gerald and Giant Chess time limit per test 2 seconds memory limit per test 256 megabytes input st ...

  10. 洛谷P1262 间谍网络

    本来只想刷道小题,没想到还有点麻烦 题目描述 由于外国间谍的大量渗入,国家安全正处于高度的危机之中.如果A间谍手中掌握着关于B间谍的犯罪证据,则称A可以揭发B.有些间谍收受贿赂,只要给他们一定数量的美 ...