/*
onmousedown : 选择元素
onmousemove : 移动元素
onmouseup : 释放元素
*/

查看Demo:拖拽图片

    function drag(obj) {

        obj.onmousedown = function(ev) {
var ev = ev || event; var disX = ev.clientX - this.offsetLeft;
var disY = ev.clientY - this.offsetTop; if ( obj.setCapture ) {
obj.setCapture();
} document.onmousemove = function(ev) {
var ev = ev || event; obj.style.left = ev.clientX - disX + 'px';
obj.style.top = ev.clientY - disY + 'px';
} document.onmouseup = function() {
document.onmousemove = document.onmouseup = null;
//释放全局捕获 releaseCapture();
if ( obj.releaseCapture ) {
obj.releaseCapture();
}
} return false; } }

Jquery拖拽原理的更多相关文章

  1. 11个好用的jQuery拖拽拖放插件

    这次我们整理一些拖拽播放类型的jQuery插件,这些可能不是很常用,但偶尔会有网站设计项目用到,特别是后台相关的开发项目,这个拖放排序功能一般都会有,所以适合大家收藏起来,方便日后使用.接下来一起看盾 ...

  2. javascript拖拽原理与简单实现方法[demo]

    美国人有一句常用的俗语—“Re-inventing the Wheel”,从字面上来解释就是“重新发明轮子”.可是轮子早已问世,再要去发明岂非劳而无功? 产品经理发下需求,实施者再到网上搜索代码,也许 ...

  3. 原生js拖拽、jQuery拖拽、vue自定义指令拖拽

    原生js拖拽: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  4. JQuery拖拽改变元素的尺寸

    "元素拖拽改变大小"其实和"元素拖拽"一个原理,只是所动态改变的对象不同而已,主要在于 top.left.width.height 的运用,相对实现起来也非常容 ...

  5. JS鼠标的拖拽原理

    拖拽功能主要是用在让用户做一些自定义的动作,比如拖动排序,弹出框拖动移动等等,效果还是蛮不错的.下面讲解一下拖拽的原理,希望可以帮助到有需要的朋友! 一.拖拽的流程动作①鼠标按下②鼠标移动③鼠标松开 ...

  6. js拖拽原理和碰撞原理

    拖拽的原理onmousedown 选择元素onmousemove 移动元素onmouseup 释放元素 1:如果拖拽的时候有文字:被选中,会产生问题原因:当鼠标按下的时如果页面中有文字或者图片被选中的 ...

  7. jQuery拖拽改变元素大小

    一个非常简单的例子,体验效果:http://keleyi.com/keleyi/phtml/jqtexiao/29.htm 以下是完整代码,保存到HTML文件打开也可以体验效果. <!DOCTY ...

  8. 简单的jquery拖曵原理js特效实例

    <!DOCTYPE html> <html> <title>简单拖曵原理实例</title> <script language="jav ...

  9. JQUERY 拖拽 draggable droppable resizable selectable sortable

    今天用了jq ui的拖动碰撞功能,好不容易看到有详细的API解说,记录如下:   <script language="JavaScript" type="text/ ...

随机推荐

  1. [转]java gridbag 说明

    gridx = 2; // X2 gridy = 0; // Y0 gridwidth = 1; // 横占一个单元格 gridheight = 1; // 列占一个单元格 weightx = 0.0 ...

  2. 【git】学习路径失败了

    期初规划:搭建git远程服务器  使用gitlab作为管理工具 过程遇到的问题 1.gitlab不能安装到win ,且对centos要求6以上,我只有一台centos5  让运维帮升级 ...等待.. ...

  3. bnu 4351 美女来找茬(水水)

    http://www.bnuoj.com/bnuoj/problem_show.php?pid=4351 [题意]:用最小的矩形框,框住像素点差超过5的点. [题解]:求坐标x,y最大最小值 [cod ...

  4. iis7、mvc2.0 文件上传配置方案

    http://blog.csdn.net/useruse/article/details/5602495

  5. 1030-ACM程序设计之马拉松竞赛

    描述 校ACM协会近四个月举行了为期100天ACM程序设计之马拉松竞赛,竞赛题总数为1000,同学们反响热烈,先后有许多ACM程序设计竞赛爱好者开始先后编号,成功解答的题目数为选手的成绩. 今天进行成 ...

  6. [Ruby on Rails系列]4、专题:Rails应用的国际化[i18n]

    1. 什么是internationalization(i18n)? 国际化,英文简称i18n,按照维基百科的定义:国际化是指在设计软件,将软件与特定语言及地区脱钩的过程.当软件被移植到不同的语言及地区 ...

  7. c++ 孟岩推荐 书籍

    c++ primer 中文版本  是 教程+参考书 扛梁之作c++ 标准程序库 对于c++熟手来说更为快捷effective c++  永远是初学者必读的,但是c++11标准后的第四版,还未发布c++ ...

  8. nginx的负载均衡和反响代理配置

    4.        负载均衡配置 nginx 的 upstream默认是以轮询的方式实现负载均衡,这种方式中,每个请求按时间顺序逐一分配到不同的后端服务器,如果后端服务器down掉,能自动剔除. 另外 ...

  9. Eclipse字体修改设置

    修改字体 Window -> Preferences -> General -> Appearences -> Colors and Fonts 选择java选项,看到Java ...

  10. MyEclipse 启动tomcat时报错:Cannot change deployment state from ERROR to REDEPLOYING.ds

    myeclipse 启动tomcat时报错:Cannot change deployment state from ERROR to REDEPLOYING.ds - 刘琦的专栏 - 博客频道 - C ...