В настоящее время я создаю простое приложение, которое накладывается на одно изображение поверх другого. Верхний должен быть перетаскиваемым и изменяемого размера. Изначально я думал, что jQuery UI будет хорошей идеей, с этим есть две основные проблемы:
- По какой-то причине Chrome не нравятся оба поведения, даже если они навязаны различным элементам.
- Мне нужно 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, и мне нужно изображение.
Спасибо.