I'm currently building a simple app that overlaps one image on top of another. The top one needs to be draggable and resizable. Initially I thought jQuery UI would be a good idea, there are two main issues with it:
- For some reason, Chrome doesn't like both behaviors even when they're imposed to different elements.
- I need 8 handles, just like the standard for any image manipulation software.
Here's my code
<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>
I can't set both behaviors to the same element because it messes something up.
What I need is something like jCrop, the only difference is that I'm not cropping an image, but overlapping one on top of another. The handles are exactly what I need but the current options won't let me change the resizable element since it's a div and I need an image.
Thanks.
I ended up with jCrop, appending an <img>
element to the resizable box and resizing it as the parent was.
精彩评论