简化版的网页拖放效果-Drag-and-drop

2020-01-27 13:44:06

字体：大中小

来源：转载

供稿：网友

一个简化版的网页拖放效果-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 id="idDrag" style="border:5px solid #0000FF; background:#C4E3FD; width:50px; height:50px;"></div><script> new SimpleDrag("idDrag");</script></body></html>

上一篇：Tween 算法及缓冲特效的JavaScript代码

下一篇：JavaScript 鼠标拖放效果代码