Граница изображения справа от div, чтобы посмотреть jquery 'selection'

Question

У меня есть div, который использует JQuery Resize.

$( "#jobDisplay" ).resizable({ })

Этот div также имеет изображение справа от него для границы.

Проблема: метод изменения размера jquery позволяет вам изменять размер div только на самом краю div, в то время как моя граница находится внутри div (я использую Background-image). Как я могу выровнять границу моего изображения, и этот jquery изменяет размер ближе (перемещая триггер изменения размера на jquery на несколько пикселей влево или перемещая границу div на несколько пикселей вправо)

Пример: http://jsfiddle.net/bo6xwc28/

Кроме того, в моем коде, если я пытаюсь изменить размер div влево / вправо, у меня есть 7 пикселей, чтобы захватить div, чтобы переместить его, но в jsfiddle я получил только 2? Не уверен, почему это происходит, но мне нравится иметь возможность редактировать и это значение (пример: увеличьте его до 10 пикселей, чтобы пользователи могли легче его выбрать).

Каким бы ни было решение, оно должно быть максимально совместимым с браузерами.

редактировать: Другими словами, сейчас он изменяет размеры в красной строке (верхнее изображение) Я хочу, чтобы он изменял размеры в нижней строке: http://postimg.org/image/dslgqsiul/

Answer 1

Согласно документации довольно легко добавить элемент handle. Я бы сделал это так:

#jobDisplay {
    ...
    position: relative;
}
.ui-resizable-handle-e {
    position: absolute;
    width: 25px;
    right: 0;
    top: 0;
    bottom: 0;
    cursor: pointer;
}

<div id="jobDisplay">
    <div class="ui-resizable-handle ui-resizable-handle-e"></div>
    ...

$("#jobDisplay").resizable({
    stop: function (event, ui) {},
    handles: {
        "e": ".ui-resizable-handle-e"
    }
});

демонстрация

Answer 2

Вы можете отрегулировать положение ручки изменения размера внутри div с помощью

.ui-resizable-se {
    /* Adjust resize-handle */
    right: 5px;
    bottom: -2px; 
}

JSFiddle: https://jsfiddle.net/ht5zdmx0/

Answer 3

Вы можете обернуть содержимое в другой div, как это: jsFiddle

<div id="jobDisplay">
  <div class="wrap">
   <span>hey dfgdfgdfg dfg </span><br />
   <span>hey2 dfgdfgdfgdfg</span><br />
   <span>hey3 sdfsdfsdf</span><br />
  </div>
</div>