具有 8 个手柄和拖放功能的图像缩放器

Question

我目前正在构建一个简单的应用程序，它将一个图像重叠在另一个图像之上。顶部的需要可拖动和调整大小。最初我认为 jQuery UI 会是一个好主意，它有两个主要问题：

1. 出于某种原因，Chrome 不喜欢这两种行为，即使它们被强加给不同的元素也是如此。
2. 我需要 8 个手柄，就像任何图像处理软件的标准一样。

这是我的代码

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/base/jquery-ui.css" />
<script>
$(document).ready(function(){
    $(".draggable").draggable();
    $(".resizable").resizable({ handles: 'n, e, s, w, ne, se, sw, nw' });
});
</script>

<img src="http://i.stack.imgur.com/TWqnS.jpg" />
<span class="draggable">
<img src="http://i.stack.imgur.com/2fmzr.png" width="192" height="192" class="resizable" />
</span>

我不能将这两种行为设置为同一个元素，因为它会搞砸一些事情。

我需要的是jCrop 之类的东西，唯一的区别是我不是裁剪图像，而是将一个图像重叠在另一个图像之上。手柄正是我需要的，但当前选项不允许我更改可调整大小的元素，因为它是一个 div，我需要一个图像。

谢谢。

Answer 1

我最终得到了 jCrop，将一个 <img> 元素附加到可调整大小的框，并将其大小调整为父项。