/*绝对定位很重要*/
#helper{position:absolute;width:100px;height:100px;border:1px solid #a9b53f;cursor:pointer;display:none;background-color:#999;top:30px;left:30px}
//目标源
var target;
//拖拽辅助容器
var helper;
//鼠标默认状态（false=没有按下）
var iMouseDown=false;
//当前的目标源
var ctar;
//鼠标偏移量
var mouseOff;
//ajax相关
var ajax;
//继承number类的NANA0，用途为：如果一个数为100px会返回100。
Number.prototype.NaN0=function(){return isNaN(this)?0:this;}
//初始化AJAX
function createRequest(){
var ajax;
if(window.ActiveXObject){
try{
ajax = new ActiveXObject(“Microsoft.XMLHTTP”);
}catch(e){
ajax = false;
}
}else{
try{
ajax = new XMLHttpRequest();
}catch(e){
ajax = false;
}
}
if(!ajax){
alert(“Error creating the XMLHttpRequest object.”);
}else{
return ajax;
}
}
//反送AJAX请求
function cutp(cutC){
ajax=createRequest();
ajax.onreadystatechange = action;
//发送请求的URL
url = “path=./test1.jpg&x=”+parseInt(cutC.style.left)+”&y=”+parseInt(cutC.style.top)+”&width=”+parseInt(cutC.offsetWidth)+”&height=”+parseInt
(cutC.offsetHeight);
window.status = url;
ajax.open(“GET”, “image.php?”+url, true);
ajax.send(null);
}
function action(){
var show = document.getElementById(“show”);
//如果SHOW这个容器原先有子节点，就清楚子节点
if(show.hasChildNodes()){
show.removeChild(show.childNodes[0]);
}
//状态为4&200的时候返回信息
if(ajax.readyState==4&&ajax.status==200){
show.innerHTML = ajax.responseText;
}
}
//创建可拖拽容器
function createContainer(arg){
helper = document.getElementById(‘helper’);
//设置属性
helper.setAttribute(“cut”,1);
arg.onmouseover = function(){
helper.style.display=”block”;
}
arg.onmouseout = function(){
helper.style.display=”none”;
}
helper.ondblclick = function(){
cutp(helper);
}
}
//获取鼠标位置
function mouseCoords(ev){
if(ev.pageX || ev.pageY){
return {x:ev.pageX, y:ev.pageY};
}
return {
x:ev.clientX + document.body.scrollLeft – document.body.clientLeft,
y:ev.clientY + document.body.scrollTop – document.body.clientTop
};
}
function getMouseOffset(target, ev){
ev = ev || window.event;
var docPos = getPosition(target);
var mousePos = mouseCoords(ev);
return {x:mousePos.x – docPos.x, y:mousePos.y – docPos.y};
}
//获取鼠标相对父节点的偏移量
function getPosition(e){
var left = 0;
var top = 0;
while (e.offsetParent){
left += e.offsetLeft + (e.currentStyle?(parseInt(e.currentStyle.borderLeftWidth)).NaN0():0);
top += e.offsetTop + (e.currentStyle?(parseInt(e.currentStyle.borderTopWidth)).NaN0():0);
e = e.offsetParent;
}
left += e.offsetLeft + (e.currentStyle?(parseInt(e.currentStyle.borderLeftWidth)).NaN0():0);
top += e.offsetTop + (e.currentStyle?(parseInt(e.currentStyle.borderTopWidth)).NaN0():0);
return {x:left, y:top};
}
//鼠标移动处罚的函数
function mouseMove(ev){
ev = ev||window.event;
var tar = ev.target||ev.srcElement;
var mousePos = mouseCoords(ev);
var rootar = tar.parentNode;
var mouseOf = getPosition(rootar);
//判断状态
if(iMouseDown&&mouseOff){
var limLefX=mouseOf.x+rootar.offsetWidth-tar.offsetWidth;
var limBottomY =mouseOf.y+rootar.offsetHeight-tar.offsetHeight;
var conLeft = mousePos.x-mouseOff.x;
var conTop = mousePos.y-mouseOff.y;
if(conLeft>=mouseOf.x&&conLeft<=limLefX){
helper.style.left = mousePos.x-mouseOff.x;
}
if(conTop>=mouseOf.y&&conTop<=limBottomY){
helper.style.top = mousePos.y-mouseOff.y;
}
}
}
function mouseUp(){
iMouseDown = false;
}
//按下鼠标按键的函数
function mouseDown(ev){
iMouseDown = true;
ev = ev||window.event;
var tar = ev.target||ev.srcElement;
if(tar.getAttribute(“cut”)){
var hmouseOff = getPosition(tar);
helper.style.left = hmouseOff.x;
helper.style.top = hmouseOff.y;
mouseOff = getMouseOffset(tar,ev);
}
}
//监听事件
document.onmouseup = mouseUp;
document.onmousemove = mouseMove;
document.onmousedown = mouseDown;
window.onload=function(){
target = document.getElementById(“image”);
createContainer(target);
}