<style>
#image{background-image:url(test1.jpg);width:1000px;height:200px;border:1px solid #000}
/*绝对定位很重要*/
#helper{position:absolute;width:100px;height:100px;border:1px solid #a9b53f;cursor:pointer;display:none;background-color:#999;top:30px;left:30px}
</style>
<script>
//目标源
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);
}
</script>
<div id="image" class="im"><div id="helper" class="drag">#dragHelper</div></div>
<div id="show"></div>