摘要:

  最近在项目中要做一个图片预览的功能,这时候会遇到用户上传很大的图片,已经超出视图界面。最终决定做一个在固定宽和高的位置,用户可以拖动图片查看。所以自己就写了一个支持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. ASP.NET MVC 5 入门教程 (1) 新建项目

    文章来源: Slark.NET-博客园 http://www.cnblogs.com/slark/p/mvc-5-get-started-create-project.html 下一节:ASP.NET ...

  2. valueOf和toString

    有一道经典的题目: var add = function() {___}; console.log(add(3)(4)(5)); // 输出60 题目要求能无限相乘,请补充add函数. 首先很显然,a ...

  3. 一个js验证类

    //******************************************************************* //作者: 丁伯洋 //日期: 2006-4-27 //概要 ...

  4. AE 打开各种格式文件

    http://blog.sina.com.cn/s/blog_7a3fc90501016qrg.html /// <summary>/// 打开ShapeFile文件/// </su ...

  5. [USACO2003][poj2018]Best Cow Fences(数形结合+单调队列维护)

    http://poj.org/problem?id=2018 此乃神题……详见04年集训队论文周源的,看了这个对斜率优化dp的理解也会好些. 分析: 我们要求的是{S[j]-s[i-1]}/{j-(i ...

  6. jquery.validate.js常用扩展函数

    $(function () { // 判断整数value是否等于0 jQuery.validator.addMethod("isIntEqZero", function (valu ...

  7. 每天一个linux命令(34):kill命令

    Linux 中的kill命令用来终止指定的进程(terminate a process)的运行,是Linux下进程管理的常用命令.通常,终止一个前台进程可以 使用Ctrl+C键,但是,对于一个后台进程 ...

  8. hdu2222 AC自动机

    字典树也可以做. #include<stdio.h> #include<string.h> #include<stdlib.h> #define maxn 1000 ...

  9. POJ2186 Popular Cows

    Description Every cow's dream is to become the most popular cow in the herd. In a herd of N (1 <= ...

  10. NOIP2008普及组题解

    NOIP2008普及组题解 从我在其他站的博客直接搬过来的 posted @ 2016-04-16 01:11 然后我又搬回博客园了233333 posted @ 2016-06-05 19:19 T ...