簡化版的網頁拖放效果-Drag-and-drop

2024-09-05 12:18:08

字體：大中小

來源：轉載

供稿：網友

一個簡化版的網頁拖放效果-Drag-and-drop，如果忽略很多細節，實現起來很簡單，但往往細節才是難點所在。程序的原型是在做圖片切割效果的時候做出來的，希望大家通過本例對拖放特效的實現有一個大致的掌握。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>簡易拖放效果</title></head><body><script> 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 Bind = function(object, fun) {	return function() {		return fun.apply(object, arguments);	}} var BindAsEventListener = function(object, fun) {	return function(event) {		return fun.call(object, (event || window.event));	}} 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 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";	addEventHandler(this.Drag, "mousedown", BindAsEventListener(this, this.Start));  },  //準備拖動  Start: function(oEvent) {	this._x = oEvent.clientX - this.Drag.offsetLeft;	this._y = oEvent.clientY - this.Drag.offsetTop;	addEventHandler(document, "mousemove", this._fM);	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() {	removeEventHandler(document, "mousemove", this._fM);	removeEventHandler(document, "mouseup", this._fS);  }};</script><div   class="p3xp3hd"   id="idDrag" style="border:5px solid #0000FF; background:#C4E3FD; width:50px; height:50px;"></div><script> new SimpleDrag("idDrag");</script></body></html>

上一篇：JavaScript 鼠標拖放效果代碼

下一篇：Tween 算法及緩沖特效的JavaScript代碼