摘要:

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

    Uploadify是JQuery的一个上传插件,实现的效果非常不错,带进度显示.它的功能特色总结如下: 支持单文件或多文件上传,可控制并发上传的文件数 在服务器端支持各种语言与之配合使用,诸如PHP, ...

  2. iOS适配HTTPS,创建一个自签名的SSL证书(x509)具体步骤

    引言(创建生成的证书只能用于测试使用.如果想使用自签名证书就只能以自己为 CA机构颁发证书,进行双向认证才能使用) 使用HTTP(超文本传输)协议访问互联网上的数据是没有经过加密的.也就是说,任何人都 ...

  3. 【开源】XPShadow, 用阴影让UWP更有层次感

    UWP采用的是纯扁平化的设计,个人感觉极端了点,整个世界都是平的,导致App分不清层次,看不出重点.其实扁平化是趋势,android, ios都在搞,问题是android, ios都可以很轻松的实现阴 ...

  4. Android Studio 常用快捷键及如何沿用Eclipse的快捷键

    1.显示最近编辑的文件列表 Ctrl + E 2.快速打开类 Ctrl + N 3.快速打开文件(可以是XML等各种格式后缀的文件) Ctrl + Shift + N 4.当前方法的声明 Alt + ...

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

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

  6. EntityFramework_MVC4中EF5 新手入门教程之三 ---3.排序、 筛选和分页

    在前面的教程你实施了一套基本的 CRUD 操作,为Student实体的 web 页.在本教程中,您将添加排序. 筛选和分页到 StudentsIndex的功能.您还将创建一个页面,并简单分组. 下面的 ...

  7. AngularJS开发指南1:AngularJS简介

    什么是 AngularJS? AngularJS 是一个为动态WEB应用设计的结构框架.它能让你使用HTML作为模板语言,通过扩展HTML的语法,让你能更清楚.简洁地构建你的应用组件.它的创新点在于, ...

  8. 传智168期JavaEE就业班 day05-XML 约束与解析

    * 课程回顾: * DOM解析HTML简介 * DOM 文档对象模型 * 解析器 * document对象 * getElementById("id的值"); 返回一个元素(标签) ...

  9. Webform之Repeater中的单选和多选的应用以及前段JS的实现

    HTML中的代码 <asp:Repeater ID="Repeater1" runat="server"> <HeaderTemplate&g ...

  10. 转: maven进阶:一个多模块项目

    一个多模块项目通过一个父POM 引用一个或多个子模块来定义.父项目,通过以下配置,将子项目关联. <packaging>pom</packaging> <modules& ...