Javascript Resize and drag classes, based on jquery

Some time ago wrote a "online picture cutting" Small program, now the resize and drag action as a separate class separate, and share with you. All two classes require jquery support, but it should be easy to rewrite the non-jquery version. In addition, the resize class is similar to the code for the drag class and should be easily integrated into a class if you want to. A willing friend can try. Welcome to Pat Bricks and make suggestions:)

Use

Click here to see the demo effect.

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);
　　　　});
});

The following is the HTML section:

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>