JavaScript 拖放效果_html/css_WEB-ITnose
拖放效果,也叫拖拽、拖动。一个简单的拖放效果
拖动div
【程序说明】
首先初始化函数,对拖放对象添加mousedown监听事件
initialize:function(drag){ this.Drag = $$(drag);//拖放对象 this._x = this._y = 0;//记录鼠标相对于拖放对象的位置 this._fM = BindAsEventListener(this, this.Move); //绑定拖动时执行的函数 this._fS = Bind(this, this.Stop); //绑定拖动结束执行的函数 this.Drag.style.position = "absolute"; EventUtil.addEventHandler(this.Drag, "mousedown", BindAsEventListener(this, this.Start)); //监听拖动对象mousedown事件 }
登入後複製
之后在Start方法添加mousemove和mouseup事件,分别监听拖放对象的位置和取消监听事件
Start:function(oEvent){ //记录mousedown触发时鼠标相对于拖放对象的位置 this._x = oEvent.clientX - this.Drag.offsetLeft; this._y = oEvent.clientY - this.Drag.offsetTop; //监听mousemove 和 mouseup事件 EventUtil.addEventHandler(document, "mousemove", this._fM); EventUtil.addEventHandler(document, "mouseup", this._fS); }
登入後複製
完整拖放程序:
/** *拖放程序 */ var simpleDrag = Class.create(); simpleDrag.prototype = { //初始化对象 initialize:function(drag){ this.Drag = $$(drag);//拖放对象 this._x = this._y = 0;//记录鼠标相对于拖放对象的位置 this._fM = BindAsEventListener(this, this.Move); //绑定拖动时执行的函数 this._fS = Bind(this, this.Stop); //绑定拖动结束执行的函数 this.Drag.style.position = "absolute"; EventUtil.addEventHandler(this.Drag, "mousedown", BindAsEventListener(this, this.Start)); //监听拖动对象mousedown事件 }, //准备拖动 Start:function(oEvent){ //记录mousedown触发时鼠标相对于拖放对象的位置 this._x = oEvent.clientX - this.Drag.offsetLeft; this._y = oEvent.clientY - this.Drag.offsetTop; //监听mousemove 和 mouseup事件 EventUtil.addEventHandler(document, "mousemove", this._fM); EventUtil.addEventHandler(document, "mouseup", this._fS); }, //拖动 Move:function(oEvent){ this.Drag.style.left = oEvent.clientX - this._x + "px"; this.Drag.style.top = oEvent.clientY - this._y + "px"; }, //停止拖动 Stop:function(){ EventUtil.removeEventHandler(document, "mousemove", this._fM); EventUtil.removeEventHandler(document, "mouseup", this._fS); }, }; //初始化拖动 new simpleDrag('drag');
登入後複製
完整DEMO:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>JavaScript拖放效果</title> <style type="text/css"> *{margin:0;padding:0;} .drag-wrap{height: 300px;margin:10px;border:5px solid #FF8000;background:#8080C0;position: relative;} .draggable{width: 100px;height: 100px;position: absolute;top: 100px;left:100px;background:#eee;border:1px solid #aceaac;cursor: move;} </style></head><body> <div class="drag-wrap"> <div class="draggable" id="drag">拖动div</div> </div> <div class="drag-status" id="drag-status" style="height:30px;padding:0 10px;"></div> <script type="text/javascript"> /** *工具函数 */ var isIE = (document.all) ? true : false ; var $$ = function(id){ return "string" == typeof id ? document.getElementById(id) : id; }; var Class = { create: function() { return function() { this.initialize.apply(this, arguments); } } }; var Extend = function(destination,source){ for(var property in source){ destination[property] = source[property]; } }; var BindAsEventListener = function(object,func){ return function(event){ return func.call(object,event || window.event); } }; var Bind = function(object,func){ return function(){ return func.apply(object,arguments); } }; /** *跨浏览器事件对象 */ var EventUtil = { //事件注册处理程序 addEventHandler:function(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; } }, //事件移除处理程序 removeEventHandler:function(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; } }, getEvent:function(event){ return event ? event : window.event ; }, getTarget:function(event){ return event.target || event.srcElement; } }; /** *拖放程序 */ var simpleDrag = Class.create(); simpleDrag.prototype = { //初始化对象 initialize:function(drag){ this.Drag = $$(drag);//拖放对象 this._x = this._y = 0;//记录鼠标相对于拖放对象的位置 this._fM = BindAsEventListener(this, this.Move); //绑定拖动时执行的函数 this._fS = Bind(this, this.Stop); //绑定拖动结束执行的函数 this.Drag.style.position = "absolute"; EventUtil.addEventHandler(this.Drag, "mousedown", BindAsEventListener(this, this.Start)); //监听拖动对象mousedown事件 }, //准备拖动 Start:function(oEvent){ //记录mousedown触发时鼠标相对于拖放对象的位置 this._x = oEvent.clientX - this.Drag.offsetLeft; this._y = oEvent.clientY - this.Drag.offsetTop; //监听mousemove 和 mouseup事件 EventUtil.addEventHandler(document, "mousemove", this._fM); EventUtil.addEventHandler(document, "mouseup", this._fS); }, //拖动 Move:function(oEvent){ this.Drag.style.left = oEvent.clientX - this._x + "px"; this.Drag.style.top = oEvent.clientY - this._y + "px"; }, //停止拖动 Stop:function(){ EventUtil.removeEventHandler(document, "mousemove", this._fM); EventUtil.removeEventHandler(document, "mouseup", this._fS); }, }; //初始化拖动 new simpleDrag('drag'); </script></body></html>
登入後複製
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

AI Hentai Generator
免費產生 AI 無盡。

熱門文章
R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前
By 尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
4 週前
By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前
By 尊渡假赌尊渡假赌尊渡假赌
擊敗分裂小說需要多長時間?
3 週前
By DDD
R.E.P.O.保存文件位置:在哪里以及如何保護它?
3 週前
By DDD

熱工具

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)

我如何使用html5&lt; time&gt; 元素以語義表示日期和時間?
