Versuchen Sie, ein Drag-and-Drop-Modul zu kapseln. Ich habe dabei einige Wendungen durchgemacht. Zuerst hatte ich geplant, nur style.left zu verwenden, aber dafür muss man position: absolute festlegen. Es kann Auswirkungen auf den Code haben. Obwohl die CSS-Transformation die Kompatibilität beeinträchtigt, verwende ich hier immer noch die Übersetzung dieses Attributs, um den Umzug abzuschließen.
Code nur mit Stil vervollständigt
Es gibt nicht viel zu sagen, gehen wir direkt zum Code:
HTML und CSS, die Position muss hier festgelegt werden, dies ist das erste Mal Ich schreibe diesen Code, den ich damals vergessen habe, aber am Ende konnte der Effekt überhaupt nicht erzielt werden, obwohl der JS korrekt geschrieben wurde ... Es war wirklich kurzgeschlossen
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>学习</title>
<style>
*{
margin: 0;
padding: 0;
}
#box{
width: 200px;
height: 200px;
background: #6f6;
font-size: 20px;
cursor:move;
position: absolute;
}
</style>
</head>
<body>
<p id="box"></p>
<script src="js/drag_module.js"></script>
</body>
</html>Nach dem Login kopieren
Der Punkt! ! JS
; //这个分号是为了防止其他的模块最后忘记加分号，导致错误。
(function() {
//构造函数，属于每一个实例
function Drag(selector) {
this.elem = typeof selector == 'object' ? selector : document.getElementById(selector);
//鼠标初始位置
this.startX = 0;
this.startY = 0;
//元素初始位置
this.sourceX = 0;
this.sourceY = 0;
this.init();
}
//原型，共有的
Drag.prototype = {
constructor: Drag,
init: function() {
this.setDrag();
},
//用于获取元素当前的位置信息
getPosition: function() {
var that = this;
var pos = {};
pos = {
x: that.elem.offsetLeft,
y: that.elem.offsetTop
};
return pos;
},
//用来设置当前元素的位置
setPosition: function(pos) {
this.elem.style.left = pos.x + 'px';
this.elem.style.top = pos.y + 'px';
},
//该方法用来绑定事件
setDrag: function() {
var self = this;
this.elem.addEventListener('mousedown', start, false);
function start(event) {
self.startX = event.pageX;
self.startY = event.pageY;
var pos = self.getPosition();
self.sourceX = pos.x;
self.sourceY = pos.y;
document.addEventListener('mousemove', move, false);
document.addEventListener('mouseup', end, false);
}
function move(event) {
//总体思想：鼠标距浏览器距-鼠标距元素距离
var currentX = event.pageX; //当前的鼠标x位置
var currentY = event.pageY; //当前的鼠标y位置
var distanceX = currentX - self.startX; //鼠标移动的距离x
var distanceY = currentY - self.startY; //鼠标移动的距离y
self.setPosition({
x: self.sourceX + distanceX,
y: self.sourceY + distanceY
});
}
function end(event) {
document.removeEventListener('mousemove', move);
document.removeEventListener('mouseup', end);
}
}
};
//暴露在外
window.Drag = Drag;
})();
new Drag('box');Nach dem Login kopieren
Dieser Code ist relativ einfach zu verstehen. Als ich mir Bo Dashens Code zum ersten Mal ansah, verstand ich die Verwendung von Translate tatsächlich nicht, weil ich nicht darüber nachdachte, warum reguläre Ausdrücke verwendet wurden. ......
Obwohl es relativ einfach ist, müssen wir noch das Prinzip dieses Codes analysieren:
1 Es gibt einen Konstruktor Drag() in der selbstausführenden Funktion Die Methoden und Eigenschaften, die wir in der Funktion festlegen, sind für jede Konstruktorinstanz eindeutig, z. B. ihre Standortinformationen usw. Der Prototyp enthält drei Methoden: getPosition() zum Abrufen von Elementpositionsinformationen, setPosition() zum Festlegen der Elementposition und setDrag() zum Binden von Ereignissen. Da diese drei Methoden öffentlich sind, setzen wir sie ein, um Ressourcen zu sparen Prototyp.
2. Das Prinzip der Ausführung dieses Codes lautet: Wenn die Maus gedrückt wird, werden die Anfangspositionsinformationen des Elements sourceX/Y und die Anfangspositionsinformationen des Mauselements startX/Y abgerufen Wenn die Bewegung abgeschlossen ist, wird die neue Position der Maus als aktuelle X/Y-Position ermittelt. Subtrahieren Sie die beiden Mauspositionen, um die Entfernung X/Y zu erhalten, um die sich die Maus bewegt. Dies ist auch die Entfernung, um die sich das Element bewegt. Anschließend weisen wir diesen Wert dem Element zu style.left/top. Das Ziehen von Elementen wird erreicht.
Die Kombination aus Transformation und Stil
Aufgrund der technologischen Entwicklung beginnen immer mehr Geräte, CSS3 zu unterstützen. Darüber hinaus beansprucht Stil immer mehr Ressourcen und hat Probleme mit der Effizienz Erwägen Sie die Verwendung von transform.
Browserkompatibles Schreiben
Wir fügen zunächst ein privates Attribut vor der Funktion Drag() hinzu:
var transform = getTransform();
Nach dem Login kopieren
Fügen Sie unten eine private Methode hinzu:
function getTransform() {
var transform = "",
pStyle = document.createElement('p').style,
transformArr = ['transform', 'webkitTransform', 'MozTransform', 'msTransform', 'oTransform'],
i = 0,
l = transformArr.length;
for (; i < l; i++) {
if (transformArr[i] in pStyle) {
return transform = transformArr[i];
}
}
return transform;
}Nach dem Login kopieren
PS: Denken Sie an die Methode createElement(), sie wird beim nächsten Mal nützlich sein, um die Browserkompatibilität zu bestimmen!
Wir müssen auch eine Funktion unter getPosition() in der gleichen Form hinzufügen:
getTranslate: function() {
var val = {};
var transformValue = document.defaultView.getComputedStyle(this.elem, false)[transform];
if(transformValue=='none'){
val={x:0,y:0};
}else{
var transformArr = transformValue.match(/-?\d+/g);
val = {
x: Number(transformArr[4]),
y: Number(transformArr[5])
};
}
return val;
},Nach dem Login kopieren
PS: Der Grund, warum wir feststellen müssen, ob transformValue „none“ ist, liegt im Initialisierungszustand Ja, das Element wurde nicht mit dem Transformationsattribut festgelegt, sodass das Array nach der Regularisierung [4][5] nicht finden kann. Daher setzen wir die beiden Attribute von val auf 0. Dies sind die Werte von TranslateX und TranslateY, die später zu Transformation werden .
Weiter Code schreiben. Im obigen Absatz haben wir die X- und Y-Werte der Übersetzung extrahiert. Schauen Sie sich den folgenden Absatz an:
getPosition: function() {
var that = this;
var pos = {};
if(transform){
var val=this.getTranslate();
pos={
x:val.x,
y:val.y
};
}else{
pos = {
x: that.elem.offsetLeft,
y: that.elem.offsetTop
};
}
return pos;
},Nach dem Login kopieren
Achten Sie auf den Inhalt des obigen Codes, den wir geändert haben. Hier haben wir ein Urteil hinzugefügt: Wenn ein Browser vorhanden ist, der das Transformationsattribut unterstützt, verwenden wir das Transformationsattribut Um den Elementwert zu ändern, weisen Sie das zuvor in getTranslate erhaltene x und y dem x und y von pos zu.
Im obigen Codeteil verwenden wir je nach Browser unterschiedliche Methoden, um den gleichen Wert zu erhalten. Der Wert von val kommt von getTranslate(), das wir aus der Transformation des Elements extrahieren. In ähnlicher Weise müssen wir in setPosition() unten auch das if-Urteil festlegen.
setPosition: function(pos) {
if (transform) {
this.elem.style[transform] = 'translate(' + pos.x + 'px' + ',' + pos.y + 'px)';
} else {
this.elem.style.left = pos.x + 'px';
this.elem.style.top = pos.y + 'px';
}
},Nach dem Login kopieren
In diesem Absatz gibt es nichts zu besprechen, es geht lediglich um die Zuweisung von Werten in verschiedenen Formen.
Zu diesem Zeitpunkt ist das Modul verpackt. Schauen wir uns als Nächstes den vollständigen Code an:
;
(function() {
//私有属性
var transform = getTransform();
//构造函数，属于每一个实例
function Drag(selector) {
this.elem = typeof selector == 'object' ? selector : document.getElementById(selector);
//鼠标初始位置
this.startX = 0;
this.startY = 0;
//元素初始位置
this.sourceX = 0;
this.sourceY = 0;
this.init();
}
//原型，共有的
Drag.prototype = {
constructor: Drag,
init: function() {
this.setDrag();
},
//用于获取元素当前的位置信息
getPosition: function() {
var that = this;
var pos = {};
if(transform){
var val=this.getTranslate();
pos={
x:val.x,
y:val.y
};
}else{
pos = {
x: that.elem.offsetLeft,
y: that.elem.offsetTop
};
}
return pos;
},
//获取translate值
getTranslate: function() {
var val = {};
var transformValue = document.defaultView.getComputedStyle(this.elem, false)[transform];
if(transformValue=='none'){
val={x:0,y:0};
}else{
var transformArr = transformValue.match(/-?\d+/g);
val = {
x: Number(transformArr[4]),
y: Number(transformArr[5])
};
}
return val;
},
//用来设置当前元素的位置
setPosition: function(pos) {
if (transform) {
this.elem.style[transform] = 'translate(' + pos.x + 'px' + ',' + pos.y + 'px)';
} else {
this.elem.style.left = pos.x + 'px';
this.elem.style.top = pos.y + 'px';
}
},
//该方法用来绑定事件
setDrag: function() {
var self = this;
this.elem.addEventListener('mousedown', start, false);
function start(event) {
self.startX = event.pageX;
self.startY = event.pageY;
var pos = self.getPosition();
self.sourceX = pos.x;
self.sourceY = pos.y;
document.addEventListener('mousemove', move, false);
document.addEventListener('mouseup', end, false);
}
function move(event) {
//总体思想：鼠标距浏览器距-鼠标距元素距离
var currentX = event.pageX; //当前的鼠标x位置
var currentY = event.pageY; //当前的鼠标y位置
var distanceX = currentX - self.startX; //鼠标移动的距离x
var distanceY = currentY - self.startY; //鼠标移动的距离y
self.setPosition({
x: self.sourceX + distanceX,
y: self.sourceY + distanceY
});
}
function end(event) {
document.removeEventListener('mousemove', move);
document.removeEventListener('mouseup', end);
}
}
};
//私有方法，用来获取transform的兼容写法
function getTransform() {
var transform = "",
pStyle = document.createElement('p').style,
transformArr = ['transform', 'webkitTransform', 'MozTransform', 'msTransform', 'oTransform'],
i = 0,
l = transformArr.length;
for (; i < l; i++) {
if (transformArr[i] in pStyle) {
return transform = transformArr[i];
}
}
return transform;
}
//暴露在外
window.Drag = Drag;
})();
new Drag('box');Nach dem Login kopieren
Verwandte Empfehlungen:
Javascript Global Variable Encapsulation Module Implementation Code_Javascript Skills
Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Kapselung einer eigenen Modulinstanz. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
