我正在尝试使用jQuery UI实现这种效果,非常类似于在Facebook上裁剪图像的方式:
http://blog.creonfx.com/examples/javascript/facebook-cropping-mootools.html
这是一个非常简单的HTML测试用例(div
中包含一个img
):
<div>
<img src="fat_cat.jpg">
</div>
以下是看起来适合此目的的逻辑 - 但它尚未完成:
$("img").draggable({ drag: dragHandler });
function dragHandler(event, ui) {
var x = event.target.x - event.target.parentNode.offsetLeft;
var y = event.target.offsetTop;
if(x > 0) {
// How to constrain the movement here?
}
if(x < -(event.target.offsetWidth -
event.target.parentNode.offsetWidth)) {
}
if(y > 0) {
}
if(y < -(event.target.offsetHeight -
event.target.parentNode.offsetHeight)) {
}
$("p").text(x + ", " + y);
}
我的第一次尝试是修改offsetLeft
和offsetTop
变量,包括它们的多个访问点,但对我来说似乎没有任何作用。
这里有一个jsFiddle,解释了上面的内容: http://jsfiddle.net/g105b/FdkBK/