摘要:

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

    win7 下配置 java 环境变量   首先,你应该已经安装了 java 的 JDK 了,笔者安装的是:jdk-7u7-windows-x64 接下来主要讲怎么配置 java 的环境变量,也是为了以 ...

  2. apply、call、callee、caller初步了解

    在javascript中这四货通常一起出现介绍,楼主记忆力实在是太差经常忘记用法,故记此文. apply和call apply和call是函数原型的一个方法,调用者的类型必须是函数.官方解释:应用某一 ...

  3. php中的错误级别

    在php编程过程中,大家一定会遇到或多或少的错误提醒,也正是这些错误提示,指引我们编写更加干净的代码,今天先写出我们主要列出的错误类型,先挖坑,写关于php错误与异常的相关知识,慢慢填坑.    De ...

  4. 那些不好的Socket服务器设计

    基础Socket 自强的程序猿们都喜欢搞Socket,而且觉得最好自己来封装个组件出来,如果再往上,加入某种数据协议,让上层服务器开发照着此协议走,就是一个小小的框架了.于是,从头开始,最开始的服务器 ...

  5. xcode更新,想想也是醉了

    每次更新,都要整个文件全部更新,这下载速度,想想也是醉了,苹果你就不能搞了更新包吗!!

  6. HDU 5973 Game of Taking Stones 威佐夫博弈+大数

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=5973 Game of Taking Stones Time Limit: 2000/1000 MS ...

  7. 在Windows和UNIX下利用PHP和LDAP进行身份验证

    我现在的老板曾要求我为企业内部的Web服务提供一种标准的身份验证方法.我遇到的一个主要问题就是我们公司主要使用了两种平台:UNIX和.所以,我的第一个想法并不很成功:它要求每个员工都使用UNIX或者L ...

  8. js中的with语句

    javascript中的with语句是什么?       with 语句可以方便地用来引用某个特定对象中已有的属性,但是不能用来给对象添加属性.要给对象创建新的属性,必须明确地引用该对象.   看起来 ...

  9. Mysql-字段类型

    首先统计所有,以表格查看 数字类型 列类型 需要的存储量 TINYINT 1 字节 SMALLINT 2 个字节 MEDIUMINT 3 个字节 INT 4 个字节 INTEGER 4 个字节 BIG ...

  10. Java-Stack

    package 集合类.list类; import java.util.Date; import java.util.Stack; /** * stack类继承与vector类 * @author j ...