javascript - 在没有 jquery ui 的情况下使元素可拖动？

我正在尝试构建一个类似于 Twitters - http://jsfiddle.net/yarKr/1/ 的图像裁剪器。我所坚持的是拖动图像的能力。在不诉诸 jquery ui 的情况下执行此 的最佳方法是什么？

<div class="canvas">
    <span class="window"></span>
    <img src="http://www.dailystab.com/blog/wp-content/uploads/2009/03/katy-perry-esquire-4.jpg" class="draggable" />
</div>

我希望能够在 .canvas div 内移动拖动图像。

最佳答案

像这样的东西会起作用: jsFiddle

var TheDraggable = null;

$(document).ready(function () {

    $('.draggable').on({
        mousedown: function () { TheDraggable = $(this); },
        mouseup: function () { TheDraggable = null; }
    });

    $(document).mousemove(function (e) {

        if (TheDraggable) {

            TheDraggable.css({'top': e.pageY, 'left': e.pageX});
        }
    });
});

然后为 CSS 添加以下内容:.draggable { position:absolute; }
您可以重写此内容并在重新定位时添加某种形式的缓动、更改光标或根据图片上初始单击的位置添加更精确的起点，但总的来说，这应该会让您开始。

关于javascript - 在没有 jquery ui 的情况下使元素可拖动？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/17776150/