我正在尝试构建类似于 Twitter 的图像裁剪器 - 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/