Javascript Resize和Drag类,基于jQuery

核心提示：本文示例源代码或素材下载 前一段时间写了一个 "在线图片切割"的小程序，现在将其中的Resize和Drag动作作为单独的类分离出来，Javascript Resize和Drag类,基于jQuery，与大家分享，这两个类都须要jQuery支持，应该可容易的整合为一个类，有心的朋友可以试一下，但

本文示例源代码或素材下载

前一段时间写了一个 "在线图片切割"的小程序，现在将其中的Resize和Drag动作作为单独的类分离出来，与大家分享。这两个类都须要jQuery支持，但应该可以很轻松的改写出非jQuery的版本出来。另外，Resize类与Drag类的代码很相似，如果想的话，应该可容易的整合为一个类。有心的朋友可以试一下。欢迎拍砖和提出建议:）

使用

点击这里查看演示效果。

Use Resize and Drag

$(function(){
　　　　var　sa　=　document.getElementById('selectArea');
　　　　$('#selectArea　span').mousedown(function(e){
　　　　　　　　new　Resize(sa).start(e,　this.className.replace('-resize',　''));
　　　　});
　　　　$('#selectArea').mousedown(function(e){
　　　　　　　　new　Drag(sa).start(e);
　　　　});
});

下面是HTML部分：

Demo HTML

<div　style="margin:30px　100px;position:relative;height:500px;border:1px　solid　#000;background-color:#EEE;">
this　is　wrapper.

　　　　<div　id="selectArea"　style="left:100px;top:80px;width:150px;height:100px;　background-color:#CCC;">
　　　　<span　class="north-west-resize"></span><span　class="north-resize"></span><span　class="north-east-resize"></span>
　　　　<span　class="west-resize">　</span>　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　<span　class="east-resize">　</span>
　　　　<span　class="south-west-resize"></span><span　class="south-resize"></span><span　class="south-east-resize"></span>
　　　　you　can　resize　and　drag　this　box.
　　　　</div>
</div>