<html>

<body style="margin:0px;">

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>

<div id="drag" style="width:100px; height:100px; background-color:red; z-index:1"></div>

<div id="drop" style="width:200px; height:200px;background-color:blue; top:100px; position:absolute;"></div>

<script>

var

ev ,

dragObj = null ,

dragpos ,

tArr = [] ,

oriLoc = {} ,

canMove = true;

Number.prototype.NaN0 = function(){ return isNaN(this) ? 0 : this; };

function mouseMove(ev){

    ev   = ev || window.event;

    var mp = getEvLoc(ev);

    if(dragObj && canMove){

        dragObj.style.position = 'absolute';

        dragObj.style.top      = mp.y - dragpos.y;

        dragObj.style.left     = mp.x - dragpos.x;

    }

}

function mouseDown(ev){

    ev = ev || window.event;

    var t = ev.target || ev.srcElement;

    if( t.id == 'drag' ){

        dragObj = t;

        canMove = true;

        dragpos = getOffset(t ,ev);

        return false;

    }

}

function getOffset( t, ev  ){

    var po = getEvLoc( ev );

        oriLoc = getPosition( t );

    return  {x: (po.x - oriLoc.x), y: (po.y - oriLoc.y) };

}

function mouseUp(ev){

    if(!dragObj)

        return false;

    ev = ev || window.event;

    var mp = getEvLoc(ev) , canDrop = false;

    for(var i in tArr){

        var tempTar = tArr[i];

        var tp =  getPosition(tArr[i]);

        var tw = tempTar.offsetWidth;

        var th = tempTar.offsetHeight;

        if( mp.x > tp.x && mp.x < (tp.x + tw) && mp.y > tp.y && mp.y < (tp.y + th) ){

            canDrop = true;

        }

    }

    if(!canDrop){

        canMove = false;

        dragObj.style.position = 'relative';

        dragObj.style.top      = oriLoc.y;

        dragObj.style.left     = oriLoc.x;

    }

    dragObj = null;

    return false;

}

function getEvLoc( ev ){

    if(ev.pageX || ev.pageY){

        return { x:ev.pageX, y: ev.pageY};

    }

    return {

        x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,

        y:ev.clientY + document.body.scrollTop  - document.body.clientTop

    };

}

function getPosition( e ){

    var left = 0;

    var top  = 0;

    while (e.offsetParent){

        left += e.offsetLeft + (e.currentStyle?(parseInt(e.currentStyle.borderLeftWidth)).NaN0():0);

        top  += e.offsetTop  + (e.currentStyle?(parseInt(e.currentStyle.borderTopWidth)).NaN0():0);

        e     = e.offsetParent;

    }

    left += e.offsetLeft + (e.currentStyle?(parseInt(e.currentStyle.borderLeftWidth)).NaN0():0);

    top  += e.offsetTop  + (e.currentStyle?(parseInt(e.currentStyle.borderTopWidth)).NaN0():0);

    return {x:left, y:top};

}

function addDropTarget( obj ){

    tArr.push(obj);

}

addDropTarget(document.getElementById('drop'));

document.onmousedown = mouseDown;

document.onmousemove = mouseMove;

document.onmouseup   = mouseUp;

</script>

</body>

</html>

后续功能做成插件形式~

JS 实现拖动效果的更多相关文章

  1. JS实现拖动效果

    有个问题就是该模块要使用定位,因为有left,top属性使用,绝对定位和相对定位都行,当然你也可使用margin-left,和margin-top这2个属性,替换left,top也是可以得 这样就不用 ...

  2. js 实现win7任务栏拖动效果

    前言 在某个时刻, 我认识了一个朋友. 此人在我的教唆下, 踏上了js的不归路. 前天他问我, Win7任务栏拖动效果怎么实现. 我随口就跟他说, 这简单的一逼. 在我一晚上的折腾之后, 一份潦草的代 ...

  3. HTML 通过js实现div的拖动效果

    最近做项目,碰到一个问题,需要对div实现拖动效果. 在度娘找了很多,要么觉得代码太长,要么就是效果不理想,不过最后还是找到了一个不错的,感谢大神的留贴,方便了我们,就把代码贴下面了: <!DO ...

  4. 原生JS实现拖动滑块验证登录效果

    ♀分享一组利用原生JS实现拖动滑块验证效果 ♀在这个组代码中涉及三个方面的知识: ⑴事件处理 ⑵添加验证标记 ⑶选择器的封装   代码如下: <!DOCTYPE html> <htm ...

  5. Js 拖动效果

    <!DOCTYPE html> <html> <head> <meta charset="utf8"> <title>j ...

  6. js实现一个可以兼容PC端和移动端的div拖动效果

    前段时间写了一个简单的div拖动效果,不料昨天项目上正好需要一个相差不多的需求,就正好用上了,但是在移动端的时候却碰到了问题,拖动时候用到的三个事件:mousedown.mousemove.mouse ...

  7. React.js实现原生js拖拽效果及思考

    一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...

  8. jquery div拖动效果示例代码

    div拖动效果想必大家都有见到过吧,实现的方法也是有很多的,下面为大家将介绍使用jquery是如何实现的,感兴趣的朋友不要错过 复制代码代码如下: <%@ page language=" ...

  9. Web的鼠标拖动效果

    以前写过一个拖动效果的Demo,拖拽元素新位置的计算是放在拖拽元素的mousemove事件中进行的.计算效率差,而且效果不好.所以一直有想怎样才能做出jquery-ui那种顺滑的拖拽效果. 其实顺滑的 ...

随机推荐

  1. 传统餐饮O2O支付体系成难题

    传统餐饮O2O支付体系成难题 网的数据化参考,使得门店运营更具科学性. 作为“易淘食”这样的订餐网站,主要依靠与餐厅分成 来获得利润.“根据每个餐厅合作情况不同,每一笔订单我们可获得5%-15%的佣金 ...

  2. Unity导入3D模型的过程与方法

    一.介绍 资源是游戏开发中的原材料,也就是组成游戏的模块. Unity只是一个游戏开发引擎,而并不是一个资源开发软件.这就意味着在游戏中需要的资源通常是由一些设计者使用其他软件开发出来的,然后设计者会 ...

  3. 安卓横竖屏切换时activity的生命周期

    关于Activity横竖屏切换的声明周期变化: 1.新建一个Activity并把各个生命周期打印出来 2.运行Activity,得到如下信息 onCreate-->onStart-->on ...

  4. Maven存储库

    什么是Maven资源库? 在 Maven 术语里存储库是一个目录,即目录中保存所有项目的 jar 库,插件或任何其他项目特定文件,并可以容易由 Maven 使用. Maven库中有三种类型 local ...

  5. 【转载】C#反射机制详解

    反射的定义:审查元数据并收集关於它的类型信息的能力,元数据(编辑后的基本数据单元)就是一大堆表,编译器会创建一个类定义表,一个字段定义表,一个方法定义表等,System.Reflection命名空间包 ...

  6. Linux 用户与用户组管理

    Linux 是一个多用户多任务的分是操作系统,用户是实现操作系统资源分配,同时也是安全权限模型的核 心要素之一:用户组是一个容纳很多用户的容器,可以分配权限组,进一步优化了权限分配. 一.用户管理 用 ...

  7. u3d外部资源 打包与加载的问题

    被坑了一下午,调bug,u3d外部加载资源一会可以,一会不行,始终找不到问题,最后快下班的时候,重新试了一下,原来是资源打包之前的文件名,和之后的加载资源名必须一样 [MenuItem("C ...

  8. spring 配置 Java配置类装配bean

    https://www.cnblogs.com/chenbenbuyi/p/8457700.html 自动化装配的确有很大的便利性,但是却并不能适用在所有的应用场景,比如需要装配的组件类不是由自己的应 ...

  9. MSM--Memcached_Session_Manager介绍及使用

    MSM--Memcached_Session_Manager介绍及使用 http://www.iteye.com/topic/1125301 我们都知道对于一些大型的web2.0的网站,在正式部署时一 ...

  10. Unity3D学习笔记——Android远程真机调试（Unity Remote）

    前言:当使用Unity开发移动端的游戏,特别是使用到手机的传感器,如重力感应等,调试的时候,很麻烦, 因为每次都需要编译成APK后安装到手机中测试,而Unity Remote便能很好的解决这个问题,U ...