前台：需要引用Jquery的类库和两个Ui的Js

<script type="text/javascript" src="js/jquery1.2.6.pack.js"></script>
  <script  type="text/javascript" src="js/ui.core.packed.js" ></script>
  <script type="text/javascript" src="js/ui.draggable.packed.js" ></script>

html太长就不全贴出来了，挑几个重点来说把：

 1：这个我们的html片段

2：这个是开心网中的html片段

开心网中用一个table作为画布的架子，中间的一个td设置样式为选取框，把img移到table下面，就可以看到上图的效果了，但是在设置drap的时候handler设置为table（id=crop）,来看下下面开心网的代码就知道了。

因为我们点击的时候，因为table在img之上，所以点击只能点到table。但是Jquery的drap handle不能设置源以外的元素，所以上面的方法就行不通了，参考了原文中的做法，用两个图片代替，一个做成蒙层的效果（ImageDragContainer）,一个缩小放到中间的位置，变成剪切窗口（IconContainer）,只要控制好两个图片的left，top，width，height，那么可以做到看上去像一个图片那样。如前面的效果所示。

代码太长我就不贴出来了，直接下载源代码吧！

文件类型：RAR
文件大小：107 KB
下载次数：17