JQuery UI - проблема с изменяемым размером изображения в DIV - PullRequest
Новая
       27

JQuery UI - проблема с изменяемым размером изображения в DIV

0 голосов
/ 08 ноября 2018

При изменении размера изображения слева (с помощью маркеров «n», «w», «ne», «sw» или «nw»), левая и верхняя позиции родителей не затрагиваются, что приводит к неправильному поведению, которое можно увидеть в следующей демонстрации: http://jsfiddle.net/8VY52/1704/.

<div id="draggableHelper">
    <img id="image" src="http://www.google.com.br/images/srpr/logo3w.png" />
</div>

$('#draggableHelper').draggable();
$('#image').resizable({
    handles: "n, e, s, w, ne, se, sw, nw"
});

#draggableHelper{
  border: 5px solid black
}

img{
  border: 5px solid red;
}

1 Ответ

0 голосов
/ 09 ноября 2018

Вы можете рассмотреть что-то вроде этого:

http://jsfiddle.net/Twisty/hukpwa3n/

HTML 

<div id="draggableHelper" style="display: inline-block">
  <img id="image" src="http://www.google.com.br/images/srpr/logo3w.png" />
</div>

CSS 

#draggableHelper {
  border: 5px solid black;
  padding: 5px;
  padding-bottom: 1px;
  background: red;
}

img {
  width: 100%;
  height: 100%;
  margin: 0;
}

.ui-resizable-handle {
  border: 1px solid #000;
  background: #fff;
  width: 10px;
  height: 10px;
}

.ui-resizable-se {
  right: -5px;
  bottom: -5px;
}

.ui-resizable-nw,
.ui-resizable-sw {
  margin-left: -1px;
}

.ui-resizable-nw,
.ui-resizable-ne {
  margin-top: -1px;
}

.ui-resizable-ne,
.ui-resizable-se {
  margin-right: -1px;
}

.ui-resizable-sw,
.ui-resizable-se {
  margin-bottom: -1px;
}

JavaScript 

$(function() {
  $('#draggableHelper').draggable().resizable({
    handles: "ne, se, sw, nw"
  });
});

Это позволяет <img> быть на 100% размером его родительского элемента, а затем вы можете изменить размер родительского элемента.Надеюсь, это поможет.

...