Js 拖动效果

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf8">
    <title>js拖拽效果</title>
    <style type="text/css">
    #div1 {
        width : 200px;
        height: 200px;
        position: absolute;
        background: #99dd33;
        cursor: move;
    }
    </style>
</head>
<body>
    <div id="div1"></div>
</body>
<script type="text/javascript">
    window.onload = function() {
        var disX = disY = 0;                         // 鼠标距离div的左距离和上距离
        var div1 = document.getElementById("div1");  // 得到div1对象

        // 鼠标按下div1时
        div1.onmousedown = function(e) {
            var evnt = e || event;                   // 得到鼠标事件
            disX = evnt.clientX - div1.offsetLeft;   // 鼠标横坐标 - div1的left
            disY = evnt.clientY - div1.offsetTop;    // 鼠标纵坐标 - div1的top

            // 鼠标移动时
            document.onmousemove = function(e) {
                var evnt = e || event;
                var x = evnt.clientX - disX;
                var y = evnt.clientY - disY;
                var window_width  = document.documentElement.clientWidth  - div1.offsetWidth;
                var window_height = document.documentElement.clientHeight - div1.offsetHeight;

                x = ( x < 0 ) ? 0 : x;                          // 当div1到窗口最左边时
                x = ( x > window_width ) ? window_width : x;    // 当div1到窗口最右边时
                y = ( y < 0 ) ? 0 : y;                          // 当div1到窗口最上边时
                y = ( y > window_height ) ? window_height : y;  // 当div1到窗口最下边时

                div1.style.left = x + "px";
                div1.style.top  = y + "px";
            };

            // 鼠标抬起时
            document.onmouseup = function() {
                document.onmousemove =null;
                document.onmouup = null;
            };

            return false;
        };
    };
</script>
</html>
时间: 12-10

Js 拖动效果的相关文章

js实现的div拖动效果实例代码

js实现的div拖动效果实例代码:div的拖动效果在很多效果中都有应用,当然还有很多附加的功能,本章节只是给拖动效果,并介绍一下它的实现过程.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <t

简单的鼠标拖动效果

使用js实现简单的鼠标拖动效果,但此部分代码有个小小的BUG,后期改进好我会写进来,但基本的效果已经实现,请大家参考. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>鼠标移动</title> <style> #box{ width: 50px; height: 50px; position:

Web的鼠标拖动效果

以前写过一个拖动效果的Demo,拖拽元素新位置的计算是放在拖拽元素的mousemove事件中进行的.计算效率差,而且效果不好.所以一直有想怎样才能做出jquery-ui那种顺滑的拖拽效果. 其实顺滑的拖拽效果的突破口有两点: 事件捕捉要去捕捉document的鼠标位置. 使用setInterval功能计算拖拽元素的新位置. 使用jQuery,经过一些简单的重构和调试,将代码完善如下: drag.html <!DOCTYPE html> <html> <head> <

运用HTML5原生拖动事件(drag)实现拖动效果

拖动效果相信很多朋友都自己写过,不管你用原生JS还是Jquery要实现起来也很简单,但是今天我想介绍的是运用HTML5标准中定义的原生拖动事件实现拖动效果. 一.背景: 其实说是HTML5标准定义,其实最早在IE4中就有拖放功能的API,只是在IE4中,网页中只有两种对象可以拖放:图像和某些文本.并且在IE4中唯一有效的放置目标是文本框.到了IE5.5,拖放功能得到了扩展,让网页中的任何元素都可以拖放.最终HTML5以IE的实力为基础制定了拖放规范.FF3.5+,Safari3+和Chrome根

使用jquery实现简单的拖动效果,分享源码

因为想实现相框的拖到,找了半天的原因愣是没有找到错误,所以,只能翻看源码了 如何实现拖动效果? 浏览DEMO 首先分析下拖动效果原理: 1.当鼠标在被拖动对象上按下鼠标(触发onmousedown事件,且鼠标在对象上方) 2.开始移动鼠标(触发onmousemove事件) 3.移动时更显对象的top和left值 4.鼠标放开停止拖动(触发onmouseup事件) 注意:拖动的对象必须是定位对象(即设置了position:absolute或 relative). 也就是说拖动事件=onmoused

Android 仿 窗帘效果 和 登录界面拖动效果 (Scroller类的应用) 附 2个DEMO及源代码

在android学习中,动作交互是软件中重要的一部分.当中的Scroller就是提供了拖动效果的类,在网上.比方说一些Launcher实现滑屏都能够通过这个类去实现.以下要说的就是上次Scroller类学习的后的实践了. 假设你还不了解Scroller类,那请先点击:Android 界面滑动实现---Scroller类 从源代码和开发文档中学习(让你的布局动起来) 了解之后再阅读下面内容.你会发现原来实现起来非常easy. 之前说到过.在广泛使用的側边滑动导航开源库 --SlidingLayer

js切换效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

安卓触摸事件的分发,处理和消费,以及实现图片的拖动效果

Touch事件分发中只有两个主角:ViewGroup和View.Activity的Touch事件事实上是调用它内部的ViewGroup的Touch事件,可以直接当成ViewGroup处理. View在ViewGroup内,ViewGroup也可以在其他ViewGroup内,这时候把内部的ViewGroup当成View来分析. ViewGroup的相关事件有三个:onInterceptTouchEvent.dispatchTouchEvent.onTouchEvent.View的相关事件只有两个:

jquery div拖动效果示例代码

1 <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transit