Как отразить увеличение ширины в div динамически в противоположном направлении, после того, как ширина достигает 0 или ниже нуля?

Question

хорошо, я динамически увеличиваю ширину пустого div со свойством css opacity 0.5, когда мышь перетаскивают вправо. Я также хочу увеличить ширину того же элемента div, когда он перетаскивается влевосторона (то есть) ширина достигает нуля, я могу абсолютное значение ширины, но я хочу, чтобы пользовательский интерфейс также увеличивался в том же направлении?Любые идеи будут оценены, спасибо заранее!

 #thing {
 position: absolute;
 border: 2px dashed #000;
 background-color: #fff;
 opacity: .2;
 z-index: 999999;
}    

-

var t = document.getElementById("thing");
//this is performed on mouse drag
t.style.width  = Math.abs(x - oldX) + "px"
t.style.height = Math.abs(y - oldY) + "px"

//also the html part
<div id="thing"></div>

, если значение x меньше значения oldx, то есть перетаскивание мышью влево, iхотите, чтобы изменение пользовательского интерфейса (изменение ширины и высоты) отразилось на левой стороне.

Answer 1

Вот работающее, закомментированное решение, которое вы можете изучить, только для оси X, протестированное в Firefox, но, возможно, кросс-браузерное.

http://jsfiddle.net/steve/QV6PV/

Чтобы ответить на ваш вопрос напрямую, вам нужно одновременно переместить левую сторону и увеличить ширину (указано в коде).

Вы можете добавить некоторые условные операторы для решения проблем минимальной / максимальной ширины. Также, вероятно, потребуется обработчик события, чтобы вызвать это при клике.