Ext.ns('com.trs.ImageDragger');
/**
*本組件對頁面中的圖片提供了拖動的功能，該功能主要是為了實現類似地圖的拖動效果，
*即：通過拖動圖片，可以將區域外的圖片顯示在當前的區域內部，從而對用戶可見。
*為了使頁面中的圖片支持拖動，需要進行以下步驟：
* 1)引入當前js依賴的基礎js庫﹔
* 2)引入當前的js﹔
* 3)對需要支持拖動的元素添加draggable-image樣式，屬性值可以任意﹔
* 4)對需要支持拖動的元素添加背景圖片樣式，該圖片將作為拖動的圖片﹔
*/
(function(){
var
/**
*頁面上需要支持圖片拖動的標識樣式，如果存在該class，則該元素將支持拖動
*/
className = 'draggable-image',
/**
*計算出圖片的原始寬度，並將該寬度設置到元素的屬性上，imageWidth為屬性的名稱
*/
imageWidth = 'data-image-width',
/**
*計算出圖片的原始高度，並將該高度設置到元素的屬性上，imageHeight為屬性的名稱
*/
imageHeight = 'data-image-height',
/**
*從拖動元素的backgroundImage樣式內部反解出來圖片地址的正則
*/
backgroundImageReg = /url\((["']*)([^)]*?)\1\)/i;
com.trs.ImageDragger = function(cfg){
Ext.apply(this, cfg);
this.el = $(this.el);
this.init();
};
com.trs.ImageDragger.prototype = {
init : function(){
var el = this.el;
var backgroundImage = el.style.backgroundImage;
if(!backgroundImage) return;
//獲取圖片的原始大小，以便拖動時限制圖片的拖動范圍
var img = new Image();
img.onload = function(){
el.setAttribute(imageWidth, this.width);
el.setAttribute(imageHeight, this.height);
};
img.src = backgroundImage.replace(backgroundImageReg, '$2');
this.initEvents();
},
//private
initEvents : function(){
var context = this;
Event.observe(this.el, 'mousedown', function(event){
var el = context.el;
//獲取圖片的初始位置信息
var position = el.style.backgroundPosition.split(" ");
var l = parseInt(position[0], 10), t = parseInt(position[1], 10);
var w = parseInt(el.offsetWidth, 10), h = parseInt(el.offsetHeight, 10);
var ox = event.pageX || event.clientX, oy = event.pageY || event.clientY;
var drag = function(event){
var x = event.pageX || event.clientX, y = event.pageY || event.clientY;
var px=x-ox+l, py=y-oy+t;
px = Math.min(Math.max(-(el.getAttribute(imageWidth)-w), px), 0);
py = Math.min(Math.max(-(el.getAttribute(imageHeight)-h), py), 0);
el.style.backgroundPosition = px+"px " + py + "px";
}
var dragStop=function(a){
if(drag){
Event.stopObserving(el, 'mousemove', drag, false);
drag = null;
}
if(dragStop){
Event.stopObserving(el, 'mouseup', dragStop, false);
dragStop = null;
}
};
Event.observe(el, 'mousemove', drag, false);
Event.observe(el, 'mouseup', dragStop, false);
Event.observe(el, 'mouseout', dragStop, false);
});
},
destroy : function(){
delete this.el;
}
};
DOM.ready(function(){
var doms = document.getElementsByClassName(className);
for(var index = 0; index < doms.length; index++){
new com.trs.ImageDragger({el : doms[index]});
}
});
})();