JavaScriptは簡単なドラッグ機能を実現します.
19300 ワード
： ， ， 。
: ， ，
， 。
移動する四角形は以下の通りです.
<div style="width: 100px;height: 100px;background-color:
red;position: absolute;left:0;top: 0;"></div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div style="width: 100px;height: 100px;background-
color: red;position: absolute;left:0;
top: 0;"></div>
<script>
//
function drag(elem){
var disX, //disX disY
disY; //dom
//！addEvent(); getStyle();stopBubble(); cancelHandler() ;
addEvent(elem,"mousedown",function(e){
var event = e || window.event; //
disX = event.clientX - parseInt(getStyle(elem,'left'));
disY = event.clientY - parseInt(getStyle(elem,'top'));
addEvent(document,'mousemove',mouseMove);// div , ( div )
// mousemove
addEvent(document,'mouseup',mouseUp);
stopBubble(event);
cancelHandler(event);
});
//
function mouseMove(e){
var event = e || window.event;
elem.style.left = event.clientX - disX + 'px'; // disX
elem.style.top = event.clientY - disY + 'px';
}
// ,
function mouseUp(e){
var event = e || window. event;
removeEvent(document,'mousemove',mouseMove);
removeEvent(document,'mouseup',mouseUp);
}
}
// dom getStyle(elem,prop) prop
function getStyle (elem, prop){
if(window.getComputedStyle){
return window.getComputedStyle(elem,null)[prop];
}else{
return elem.currentStyle[prop];
}
}
// dom
function addEvent(elem, type, handle){ // ( )
if(elem.addEventListener){
elem.addEventListener(type, handle, false);
}else if(elem.attachEvent){
elem.attachEvent('on' + type,function(){
handle.call(elem);
})
}else{
elem['on' + type] = handle;
}
}
// dom
function removeEvent(elem, type, handle){
if(elem.removeEventListener){
elem.removeEventListener(type, handle, false);
}else if(elem.detachEvent){
elem.detachEvent('on' + type,function(){
handle.call(elem);
})
}else{
elem['on' + type] = null;
}
}
// stopBubble(event);
function stopBubble(event){
if(event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble = true;
}
}
// :cancelHandler(event)
function cancelHandler(event){
if(event.preventDefault){
event.preventDefault();
}else{
event.returnValue = false;
}
}
var div = document.getElementsByTagName('div')[0];
drag(div);
</script>
</body>
</html>
Left ( ) 。
Right 。
Top 。
Bottom