javascript - 画像上でのマウス移動を許可し、画像のドラッグを防ぐ方法

Question

非常に単純な画像サイズ変更スクリプトがあります。私が理解しようとしているのは、ユーザーがマウスダウン/マウスムーブでカーソルをドラッグして画像のサイズを変更できるようにしながら、ゴースト画像のドラッグを防ぐ方法です。ここに私がこれまでに持っているものがありますが、これは可能ですか? 現在、マウスムーブでサイズ変更できるようにダブルクリックに設定していますが、マウスダウンでマウスムーブが画像のサイズを変更できるように設定し、マウスアップでサイズ変更をキャンセルしたいと考えています。

前もって感謝します。

コード：

$(".grid_content > img").live('mousedown',function(e){
    $(this).attr('id','image');
    $(this).css('cursor','se-resize');
    var positionX;
    var startWidth;
    var image = document.getElementById('image');
    if(!e){e = window.event};
    positionX = (e.clientX);
    startWidth = image.width;
    image.onmousemove = function(e) {
        if(!e){e = window.event};
        image.style.width = (startWidth + (e.clientX - positionX)) + 'px';
    };
    image.onmousedown = function() {
        image.onmousemove = null;
        positionX = null;
        startWidth = null;
    };
});

これを試してみましたが、運が悪く、ドラッグ全体が無効になります:

$('.grid_content > img').bind("dragstart",function(e){
    e.preventDefault();
});