<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body {
padding: 0px;
margin: 0px;
}
div {
position: absolute;
width: 100px;
height: 100px;
background-color: red;
}
#app2 {
top: 150px;
background-color: blue;
}
</style>
</head>
<body>
<div id="app">app1</div>
<div id="app2">app2</div>
<script>
//两种方式实现元素的拖动和添加限制条件拖动(用到了知识点原型链继承和es6继承)
//es5 原型实现
function Drag(id) {
this.oDiv = document.getElementById(id);
this.disx = 0;
this.disy = 0;
if (this.oDiv) {
this.init();
}
}
Drag.prototype.init = function() {
this.oDiv.onmousedown = function(ev) {
this.disx = ev.clientX - this.oDiv.offsetLeft;
this.disy = ev.clientY - this.oDiv.offsetTop;
document.onmousemove = this.fnmove.bind(this);
document.onmouseup = this.fnup;
return false;
}.bind(this)
}
Drag.prototype.fnmove = function(ev) {
this.oDiv.style.left = ev.clientX - this.disx + 'px';
this.oDiv.style.top = ev.clientY - this.disy + 'px';
}
Drag.prototype.fnup = function() {
document.onmousemove = null;
document.onmouseup = null;
}
new Drag('app');
function DragLimit(id) {
Drag.call(this, id);
}
DragLimit.prototype = new Drag();
DragLimit.prototype.fnmove = function(ev) {
Drag.prototype.fnmove.call(this, ev);
if (this.oDiv.offsetLeft <= 0) {
this.oDiv.style.left = '0px';
}
if (this.oDiv.offsetTop <= 0) {
this.oDiv.style.top = '0px';
}
}
new DragLimit('app2');
//es6 实现
class Drag {
constructor(id) {
this.oDiv = document.getElementById(id);
this.disx = 0;
this.disy = 0;
if (this.oDiv) {
this.init();
}
}
init() {
this.oDiv.onmousedown = function(ev) {
this.disx = ev.clientX - this.oDiv.offsetLeft;
this.disy = ev.clientY - this.oDiv.offsetTop;
document.onmousemove = this.fnmove.bind(this);
document.onmouseup = this.fnup;
return false;
}.bind(this);
}
fnmove(ev) {
this.oDiv.style.left = ev.clientX - this.disx + 'px';
this.oDiv.style.top = ev.clientY - this.disy + 'px';
}
fnup() {
document.onmousemove = null;
document.onmouseup = null;
}
}
new Drag('app');
class LimitDrag extends Drag {
fnmove(ev) {
super.fnmove(ev);
if (this.oDiv.offsetLeft <= 0) {
this.oDiv.style.left = '0px';
}
if (this.oDiv.offsetTop <= 0) {
this.oDiv.style.top = '0px';
}
}
}
new LimitDrag('app2');
</script>
</body>
</html>
相关推荐
es6转es5在线转换地址，和如何利用babel工具将es6语法转换成es5语法 es6有些语法是目前浏览器无法支持的，所以我们需要转换一下
### ES5与ES6中的继承方式对比 #### 一、ES5继承机制解析 在ES5中，实现继承主要依赖于原型链（prototype chain）。这种继承机制的核心在于构造函数、原型对象以及实例对象之间的关系。 1. **构造函数**： - 在...
ES5 的继承方式不能继承原生构造函数（比如 Array、Number 等），因为 ES5 的继承是先制造子类的实例对象 this，再将父类原型的属性和方法重写到子类上，由于没法访问父类的内部属性，导致 ES5 的继承方式无法继原生...
JavaScript是Web开发中不可或缺的一部分，主要分为两个核心部分：BOM（浏览器对象模型）和DOM（文档对象模型），以及两种版本：ES5和ES6。本文将深入探讨这些概念及其重要知识点。 首先，BOM（Browser Object Model...
2. **类与继承**：ES6引入了`class`关键字，用于创建对象模型，而ES5则使用构造函数和原型链。转换过程会涉及`prototype`对象和`function`声明。 3. **模板字符串**：用反引号(`)括起的字符串，允许内嵌表达式 `${...
DAY04_ES5和ES6.md
标题“js兼容es5-es6.rar”表明这是一个解决ES5和ES6兼容性问题的资源包，它提供了一种方式来使得ES6的新特性在不完全支持它们的浏览器中也能工作，特别是针对IE7和IE8这样的老版本。 描述中提到，“本方法支持大...
在ES5和ES6中，继承实现的方式有所不同，导致了在使用时的行为差异。本文将深入探讨这两种方式的区别。 首先，让我们回顾一下ES5的继承模式。在ES5中，没有内置的类或继承关键字，而是通过模拟类的概念来实现。常见...
在开始介绍具体方法之前，先简要回顾一下Vue-cli和ES6的基础知识，以及为何需要引入第三方ES5的JavaScript库。 Vue-cli是一个基于Vue.js进行快速开发的完整系统，它提供了一个官方的脚手架工具，帮助开发者快速搭建...
js一直被各个语言诟病，因为js的作用域让开发者困扰，也因为js在以前不算是面向对象的语言。...好的东西，兼容性总是不太好，不过，没关系，后期我们会学习一个工具将es6的语法转为兼容最好的es5的语法
javascript设计模式【ES5和ES6语法】
无需安装直接运行，所见即所得的转换模式，方便好用，对于ES6初学者是很棒的辅助工具。
JavaScript是Web开发中不可或缺的一部分，随着版本的更新，ES6（ECMAScript 2015）引入了许多新的特性和语法糖，提升了代码的可读性和简洁性。然而，考虑到浏览器兼容性和旧版本的JavaScript引擎，有时我们需要将ES6...
- ES5依赖构造函数和原型链实现类的行为，而ES6提供了更简洁的`class`关键字。 - **作用域差异**: - ES5中的类定义遵循函数作用域，而ES6中的类遵循块级作用域。 - **实例化差异**: - 在ES5中，即使不使用`new`...
在 React 中，ES5 和 ES6 两种写法是开发者最常用的两种方式。这两种方式有着很大的区别，了解这两种方式的区别对开发者来说非常重要。 首先，lets 看看模块引用。在 ES5 中，如果使用 CommonJS 标准，引入 React ...
2. **类与继承**：ES6引入了基于原型的类语法，提供了更接近传统面向对象编程的语言结构。类可以定义方法，可以通过`extends`关键字实现继承。 ES5: ```javascript function Animal(name) { this.name = name; ...
这是从https://babeljs.io 官方拔下来的一个 web在线 es6转es5的源码,代码中删除了无关的功能,对主要代码进行了注释, 并且对关键代码进行备注,可以提取出来作为js版本的es6to5用,不需要安装安装那么一套复杂的功能...
内容概要：本文主要介绍 JavaScript 中 ES5 和 ES6 的新特性。涵盖严格模式、Bind 方法、JSON 处理、Let 和 Const 关键词、变量解构赋值、字符串扩展方法、Symbol 类型、Set 和 Map 集合以及 Generators 生成器和 ...
总之，原型模式是JavaScript中一种强大且灵活的对象创建方式，它让JavaScript的继承机制区别于传统的面向对象语言，为开发者提供了不同的编程思路和解决方案。通过理解和掌握原型模式，我们可以更加高效地利用...
[React_JS][ES6][前端教學]_ES6#03._scope範圍對ES5與ES6_function的影響