Javascript:实操---拖拽(完整版)

CSS部分

<style type="text/css">
body{height: 3000px;
    width: 3000px;}
#div1{
    height: 100px;
    width: 100px;
    background-color: #ccc;
    position: absolute;
}
</style>

HTML部分

<div id="div1">DFDSF</div>
我发的思考附近的刷卡费的口附近的思考的撒发开急速    
</body>

JS部分

<script type="text/javascript">

window.onload=function (){

  var oDiv=document.getElementById("div1");

  var maxHeight=document.documentElement.clientHeight-oDiv.offsetHeight;

  var maxWidth=document.documentElement.clientWidth-oDiv.offsetWidth;

  oDiv.onmousedown=function (e){

    var oEvent=e||window.event;

    var disX=oEvent.clientX-oDiv.offsetLeft;

    var disY=oEvent.clientY-oDiv.offsetTop;

    

    var bodyScrollTop=document.body.scrollTop||document.documentElement.scrollTop;

    var bodyScrollLeft=document.body.scrollLeft||document.documentElement.scrollLeft;

    

    document.onmousemove=function (ev){

      var oEvent=ev||window.event;

      var x=oEvent.clientX-disX;

      var y=oEvent.clientY-disY;

      if(y<=bodyScrollTop){

        y=bodyScrollTop;

      }else if(y>=maxHeight+bodyScrollTop){

        y=bodyScrollTop+maxHeight;

      }

      if(x<=bodyScrollLeft){

        x=bodyScrollLeft;

      }else if(x>=bodyScrollLeft+maxWidth){

        x=bodyScrollLeft+maxWidth;

      }

      document.title=y;

      oDiv.style.left=x+"px";

      oDiv.style.top=y+"px";

    }

    document.onmouseup=function (){

      if(oDiv.releaseCapture){

        oDiv.releaseCapture();

      }

      document.onmousemove=null;

    }

    if(oDiv.setCapture){

     oDiv.setCapture();

    }

    return false;

  }

}

</script>

Javascript:实操---拖拽(完整版)

时间: 2024-11-03 03:32:32

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-

JavaScript动画-模拟拖拽

模拟拖拽的原理: 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&amp;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 智能社 拖拽

<!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;

在使用ActionChains类,在执行一次拖拽后再拖拽,还会重复拖拽上一个元素

背景: 在项目的实际使用中,要对多个元素进行拖拽到指定区域,并且这些元素还分属于不同的类型中.在拖拽完第一个元素之后,再去拖拽其它元素,会发现又会拖拽一次第一个元素. 历程: 1.网上搜索一番,没有得到答案: 2.翻阅ActionChains的源代码,发现它是将所有action存储在一个_actions的变量中.然后在perform方法中去执行这个数组中存储的所有action.代码如下: def perform(self): """ Performs all stored a

Android一步一步带你实现RecyclerView的拖拽和侧滑删除功能

先上效果图: 本篇文章我们来学习一个开源项目Android-ItemTouchHelper-Demo 这个项目使用了RecyclerView的ItemTouchHelper类实现了Item的拖动和删除功能,ItemTouchHelper是v7包下的一个类,我们看一下他的介绍 This is a utility class to add swipe to dismiss and drag & drop support to RecyclerView. 这是一个工具类,专门用来配合RecyclerV

openlayers中实现点的拖拽(modify),在layer中增加修改删除point。

最近忙着整地图,都忘记了总结来沉淀自己,自我检讨一下. 总结一下最近使用openlayer时学习的内容,先说下我的业务逻辑吧,在室内地图中 1,点击新增在地图上新增一个可以拖拽的点,拖拽完成后确定位置,添加其他数据,保存入库. 2,增加后展示点,点上面有序号. 3,修改时,当选中一条记录的时候需要地图上面的点高亮,这个时候可拖动位置,修改表单数据,修改后保存. 4,删除也是选中一条记录,记录删除地图点删除. 由于基于老版本开发的,本文中用到的方法都是openlayer4.6.5版本,具体问题还是

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

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