Kaedah JavaScript untuk melaksanakan fungsi drag-and-drop kemahiran objek_javascript halaman web-tutorial js-php.cn

Kaedah JavaScript untuk melaksanakan fungsi drag-and-drop kemahiran objek_javascript halaman web

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Lepaskan： 2016-05-16 16:04:00

asal

1181 orang telah melayarinya

Contoh dalam artikel ini menerangkan cara JavaScript melaksanakan fungsi seret dan lepas objek halaman web. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Drag</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<style>
#myDiv{width:50px; height:50px; background-color:red}
</style>
</head>
<body>
<div id="myDiv"></div>
</body>
<script type="text/javascript">
 var isIE = document.all &#63; true : false;
 //判断是否是IE浏览器
 function addEventHandler(oTarget, sEventType, fnHandler){
 //添加事件
 if(oTarget.addEventListener){
 oTarget.addEventListener(sEventType, fnHandler, false);
 }else if(oTarget.attachEvent){
 oTarget.attachEvent("on" + sEventType, fnHandler);
 }else{
 oTarget["on" + sEventType] = fnHandler;
 }
 }
 function removeEventHandler(oTarget, sEventType, fnHandler) {
 //移除事件
 if (oTarget.removeEventListener) {
 oTarget.removeEventListener(sEventType, fnHandler, false);
 } else if (oTarget.detachEvent) {
 oTarget.detachEvent("on" + sEventType, fnHandler);
 } else {
 oTarget["on" + sEventType] = null;
 }
 }
 var BindAsEventListener = function(object, fun) {
 //以另一个对象替换当前对象
 return function(event) {
 return fun.call(object, (event || window.event));
 }
 }
 var $ = function(id){
 return document.getElementById(id);
 }
 var Class = {
 create: function() {
 return function() {this.initialize.apply(this, arguments);}
 }
 }
 var drag = Class.create();
 drag.prototype = {
 initialize: function(id){//初始化
 this._drag = $(id);
 this._flag = false;
 addEventHandler(this._drag,'mousedown',BindAsEventListener(this,this.start));
 this._fM = BindAsEventListener(this, this.move);
 this._fS = BindAsEventListener(this, this.stop);
 this._drag.style.position = "absolute";
 },
 start: function(oEvent){//相当于onmousedown事件
 //return this._name;
 this._x = oEvent.clientX - this._drag.offsetLeft;
 this._y = oEvent.clientY - this._drag.offsetTop;
 addEventHandler(document, 'mousemove', this._fM);
 addEventHandler(document, 'mouseup', this._fS);
 if(isIE){
  addEventHandler(this._drag, "losecapture", this._fS);
 //焦点丢失
  this._Handle.setCapture();//设置鼠标捕获
 }else{
  addEventHandler(window, "blur", this._fS);//焦点丢失
  oEvent.preventDefault();//阻止默认动作
 }
 },
 move: function(oEvent){ //相当于onmonusemove事件
 this._drag.style.left = oEvent.clientX - this._x + "px";
 this._drag.style.top = oEvent.clientY - this._y + "px";
 },
 stop: function(){ //相当于onmouseup事件
 removeEventHandler(document, 'mousemove', this._fM);
 removeEventHandler(document, 'mouseup', this._fS);
 if(isIE){
  removeEventHandler(this._drag, "losecapture", this._fS);
  this._Handle.releaseCapture();
 }else{
  removeEventHandler(window, "blur", this._fS);
 }
 }
 }
 var ndrag = new drag("myDiv");
</script>
</html>

Salin selepas log masuk

Saya harap artikel ini akan membantu reka bentuk pengaturcaraan JavaScript semua orang.