JavaScript 智能社拖拽

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#div1 {width:100px; height:100px; background:red; position:absolute;}
#div2 {width:400px; height:300px; background:#CCC; position:relative;}
</style>
<script>
window.onload=function ()
{
    var oDiv=document.getElementById(‘div1‘);
    var oDiv2=document.getElementById(‘div2‘);

    var disX=0;
    var disY=0;

    oDiv.onmousedown=function (ev)
    {
        var oEvent=ev||event;

        disX=oEvent.clientX-oDiv.offsetLeft;
        disY=oEvent.clientY-oDiv.offsetTop;

        document.onmousemove=function (ev)
        {
            var oEvent=ev||event;
            var l=oEvent.clientX-disX;
            var t=oEvent.clientY-disY;

            if(l<0)
            {
                l=0;
            }
            else if(l>oDiv2.offsetWidth-oDiv.offsetWidth)
            {
                l=oDiv2.offsetWidth-oDiv.offsetWidth;
            }

            if(t<0)
            {
                t=0;
            }
            else if(t>oDiv2.offsetHeight-oDiv.offsetHeight)
            {
                t=oDiv2.offsetHeight-oDiv.offsetHeight;
            }

            oDiv.style.left=l+‘px‘;
            oDiv.style.top=t+‘px‘;
        };

        document.onmouseup=function ()
        {
            document.onmousemove=null;
            document.onmouseup=null;
        };

        return false;
    };
};
</script>
</head>

<body>
<div id="div2">
    <div id="div1"></div>
</div>
</body>
</html>

时间： 2024-08-29 06:55:26

JavaScript 智能社拖拽的相关文章

每天一个JavaScript实例-html5拖拽

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>每天一个JavaScript实例-html5拖拽</title> <style> #drop{ width:300px; height:200px; background-

模拟拖拽的原理: x1等于div.offsetLeft y1等于div.offsetTop x2等于ev.clientX(ev表示event事件) y2等于ev.clientY 当我们在方块上按下鼠标的时候,x2-x1即可确定.移动鼠标之后,我们用鼠标当前的位置即x4.y4减去x2-x1.y2-y1就可以得到方块现在的位置. 效果图:点击查看代码: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 &l

如何用javascript&nbsp;实现拖拽

JavaScript擅长于修改页面中的DOM元素,但是我们使用JavaScript通常只是实现一些简单功能,例如实现图片的翻转,网页中的标签页,等等.这篇文章将向你展示如何在页面中,对创建的元素实现拖放. 有许多理由让你在页面中加入拖放的功能,其中最简单的理由是重新组织数据.举个例子,你可能希望用户能够重组一系列的页面元素,通过放置一个input或 select组件在各个元素的旁边来代表它们的顺序是一种解决方案,使该组元素可以被拖放是一种替代方案.或者也许你想在网站上拥有一个可以被用户移动的导航

JavaScript 面向对象的拖拽

一.body <div id="box"></div> 二.css <style> #box { position: abaolute; top: 0; left: 0; width: 100px; height: 100px; } </style> 三.JavaScript <script> class Drag{ constructor(el) { this.el = el; el.startOffset = null;

javascript如何指定元素的拖拽范围

javascript如何指定元素的拖拽范围:有时候拖拽效果需要限定在某一个指定的元素之内,也就是说只能够在指定的元素内进行拖拽,下面就通过一个代码实例介绍一下如何实现此效果.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/&q

第一百三十五节，JavaScript，封装库--拖拽

JavaScript,封装库--拖拽封装库新增1个拖拽方法 /** tuo_zhuai()方法,将一个弹窗元素实现拖拽功能 * 注意:一般需要在css文件将元素里的某一个区块光标设置成提示可以拖拽,如:cursor: move; * 无参 **/ feng_zhuang_ku.prototype.tuo_zhuai = function () { if (this.jie_dian.length == 1) { var yan_su = null; for (var i = 0; i < th

javascript动画系列第一篇——模拟拖拽

× 目录 [1]原理介绍 [2]代码实现 [3]代码优化[4]拖拽冲突[5]IE兼容前面的话从本文开始,介绍javascript动画系列.javascript本身是具有原生拖放功能的,但是由于兼容性问题,以及功能实现的方式,用的不是很广泛.javascript动画广泛使用的还是模拟拖拽.本文将详细介绍该内容原理介绍模拟拖拽最终效果和在桌面上移动文件夹的效果类似鼠标按下时,拖拽开始.鼠标移动时,被拖拽元素跟着鼠标一起移动.鼠标抬起时,拖拽结束所以,拖拽的重点是确定被拖拽元素是如何移动的

Javascript 拖拽的一些简单的应用——逐行分析代码，让你轻松了解拖拽的原理

今天我们来看看如何让拖拽的物体不能拖出某个div之外和拖拽的吸附功能上次讲到我们的拖拽是不可拖出可视区范围的,在这基础上我们加个父级的div,不让他拖出父级.原理和之前的一样,简单吧. <style type="text/css"> #div1 { width: 100px; height: 100px; background: red; position: absolute; } #div2 { width: 400px; height: 300px; backgrou

JavaScript实现网页元素的拖拽效果

以下的页面中放了两个div,能够通过鼠标拖拽这两个元素到任何位置. 实现该效果的HTML页面代码例如以下所看到的: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> #xixi { width:200px; h

JavaScript 智能社 拖拽

JavaScript 智能社 拖拽的相关文章

JavaScript 智能社拖拽

JavaScript 智能社拖拽的相关文章