我正在构建一个简单的应用程序,它将一个图像重叠在另一个图像之上。最上面的一个需要可拖动和可调整大小。最初我认为jQuery UI是个好主意,它有两个主要问题:
这是我的代码
<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而且我需要一个图像。
感谢。
答案 0 :(得分:0)
我最终使用jCrop,将<img>
元素附加到可调整大小的框并将其调整为父级。