Внутри контейнера у меня есть div, который draggable
по оси x. Я хочу, чтобы пользователь имел возможность изменять размер контейнера, щелкая в любом месте и перетаскивая вертикально. Для этого я установил высоту дескриптора для resizable
метода на 100% высоты контейнера. Размер изменяется по желанию, но теперь перетаскиваемое взаимодействие блокируется из-за размера дескриптора. Я думаю, что можно выполнить этот тип изменения без использования встроенного метода изменения размера, но я не придумал изящное решение.
Скрипт: http://jsfiddle.net/LuLd9/
HTML:
<footer>
<div id="queue">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
</footer>
JS:
$('#queue').draggable({
axis: 'x',
scroll: false
});
$('footer').resizable({
handles: 'n'
});
CSS:
#queue {
overflow: visible;
height: 100%;
border: 1px solid red;
z-index: 1;
}
footer {
position: relative;
height: 20%;
top: 60%;
overflow: hidden;
border: 1px solid black;
}
.child {
display: inline-block;
height: 80%;
width: 15%;
border: 1px solid black;
}
.ui-resizable { position: relative;}
.ui-resizable-n { cursor: n-resize; height: 100%; width: 100%; top: -5px; left: 0; }
Я думаю, что вам нужно сделать это, drag
событие draggable, чтобы реализовать действие изменения размера. Это похоже на то, что вы хотите:
$('#queue').draggable({
axis: "x",
scroll: false,
drag: function( event, ui ) {
var ft = $('footer').position().top;
var fh = $('footer').height();
$('footer').css('height', fh + (ft - ui.offset.top )+ 'px');
$('footer').css('top', ui.offset.top);
}
});
Мне также пришлось изменить положение footer
на absolute
- в противном случае это будет все неудобно, что может быть не идеальным для того, что вы хотите сделать.
РЕДАКТИРОВАТЬ
Я могу приблизиться к тому, что, как я думаю, вам нужно, делая это:
$('#queue').draggable({
axis: "x",
scroll: false,
start: function( event, ui ) {
$(this).data('dir', '');
},
drag: function( event, ui ) {
var dir = $(this).data('dir');
// If we don't have a direction, decide where we're going
if ((dir != 'y') && (dir != 'x')) {
var dy = ui.originalPosition.top - ui.position.top;
var dx = ui.originalPosition.left - ui.position.left;
dir = (Math.abs(dy) > Math.abs(dx))?'y':'x';
$(this).data('dir', dir);
}
if (dir == 'y') {
// Change the height
var ft = $('footer').position().top;
var fh = $('footer').height();
$('footer').css('height', fh + (ft - ui.offset.top )+ 'px');
$('footer').css('top', ui.offset.top);
// Prevent the drag from happening
// ???
}
}
});
Если вы перетаскиваете горизонтально, это предотвратит стрельбу изменения размера, но я не могу остановить перетаскивание в этом аргументе if. Если я остановлю событие (return false
или stopImmediatePropagation()
), то это будет отменено, и вы отбросите элемент, но я не могу просто изменить позицию, поскольку, как я думаю, вышеописанное событие уходит, прежде чем оно переместится.
Возможно, у меня может отсутствовать опция на интерфейсе jQuery-UI, надеюсь, что вы ближе. Возможно, стоит отдельный вопрос только о том, "как я могу остановить перетаскивание" - кто-то еще может придумать более аккуратную реализацию.
queue
не должна двигаться при вертикальном перетаскивании. Я пробовал что-то вродеif ( (startY - e.pageY) > (startX - e.pageX) ){ $('footer').css('height', fh + (ft - ui.offset.top ) + 'px'); $('footer').css('top', ui.offset.top); }
но это не совсем там.