实例:拖拽(面向对象)

<style>
  #div1 {width: 100px; height: 100px; background: red; position: absolute;};
</style>

<script>
  var oDiv = null;
  var disX = 0;
  var disY = 0;

  window.onload = function()
  {
    oDiv = document.getElementById(‘div1‘);

    oDiv.onmousedown = fnDown;
  };

  function fnDown(ev)
  {
    var oEvent = ev||event;
    disX = oEvent.clientX - oDiv.offsetLeft;
    disY = oEvent.clientY - oDiv.offsetTop;

    document.onmousemove = fnMove;

    document.onmouseup = fnUp;
  };

  function fnMove(ev)
  {
    var oEvent = ev||event;
    oDiv.style.left = oEvent.clientX-disX + ‘px‘;
    oDiv.style.top = oEvent.clientY-disY + ‘px‘;
  };

  function fnUp(ev)
  {
    document.onnousemove = null;
    document.onmouseup = null;
  };

</script>

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

时间: 2024-10-21 21:14:08

实例:拖拽(面向对象)的相关文章

图片拖拽面向对象写法-1

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>拖拽之面向对象</title> <style> #box1{width: 100px;height: 100px;background-color: #0A246A; position: absolute;} </style> <s

拖拽面向对象的写法

<!---css部分---> #div1{  width: 200px;  height: 300px;  position: absolute;  //要实现拖拽需要把div设置为拖动层  background: red; } #div2{  width: 200px;  height: 300px;  position: absolute; //要实现拖拽需要把div设置为拖动层  background: green; top: 300px; } <!---html部分--->

图片拖拽面向对象写法-2

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style>     #box1{      width: 100px;      height: 100px;      background-color: #ffff00;      position: absolute; 

面向对象实战之封装拖拽对象

面向对象实战之封装拖拽对象 利用前面几章的所涉及到的知识,封装一个拖拽对象.为了能够帮助大家了解更多的方式与进行对比,我会使用三种不同的方式来实现拖拽. 不封装对象直接实现: 利用原生JavaScript封装拖拽对象: 通过扩展jQuery来实现拖拽对象. 本文的例子会放置于codepen.io中,供大家在阅读时直接查看.如果对于codepen不了解的同学,可以花点时间稍微了解一下. 拖拽的实现过程会涉及到非常多的实用小知识,因此为了巩固我自己的知识积累,也为了大家能够学到更多的知识,我会尽量详

每天一个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-

面向对象的拖拽

1.创建一个div,并简单设置样式 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type=&qu

拖拽系列二、利用JS面向对象OOP思想实现拖拽封装

接着上一篇拖拽系列一.JavaScript实现简单的拖拽效果这一篇博客将接着对上一节实现代码利用JS面向对象(OOP)思维对上一节代码进行封装; 使其模块化.避免全局函数污染.方便后期维护和调用:写到这里突然想起一句话“没有任何一个题目是彻底完成的.总还会有很多事情可做......” 我想这句话程序开发大概也适用吧,前端开发人员总是可以结合自己之前学到“拖拽”相关知识,不断扩展.完善.无穷无尽.......     利用匿名函数自执行实现封装 ;(function(){ //do somethi

Javascript面向对象拖拽

function Drag(id) { var _this=this; this.disX=0; this.disY=0; this.oDiv=document.getElementById(id); this.oDiv.onmousedown=function(e) { _this.fnDown(e); } } Drag.prototype.fnDown=function(e) { var _this=this; var e=e||event; this.disX=e.pageX-this.o

用面向对象写一个拖拽,并实现继承

思路:先用面过过程的方法将要实现的效果实现出来,然后按照以下步骤将拆分成面向对象 //面向过程的程序改写成面向对象程序不能有函数嵌套 //将window.onload初始化整个程序改为构造函数初始化整个对象 //将面向过程中的变量改为属性 //将面向过程中的函数改为方法 index.html代码: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">

面向对象写选项卡、拖拽

js: 面向对象说白了就是一个黑匣子,所谓黑匣子就是知道具体怎么弄但不了解里面运转流程. 面向对象的组成:属性.方法. 属性其实也就是js里面常用的对象,只不过换了一只叫法. 至于方法则是js里面常用的函数. 唯一两者的区别,属性和方法是被定义的,也就是它们是被束缚的,反之,函数.对象异然. 例子: var a=12; alert(a);               //对象是自由的 var arr=[1,2,3,4]; arr.a=14; alert(arr.a);         //属性被