Javascript Resize和Drag类,基于jQuery

Javascript Resize和Drag类,基于jQuery2010-06-30 博客园 czy1121前一段时间写了一个 ""的小程序，现在将其中的Resize和Drag动作作为单独的类分离出来，与大家分享。这两个类都须要支持，但应该可以很轻松的改写出非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>