Изменяемая ручка блокирует перетаскиваемое взаимодействие

Question

Изменяемая ручка блокирует перетаскиваемое взаимодействие

0

Внутри контейнера у меня есть 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; }

metamlkshk 23 сен. 2013, в 06:27

Источник

Теги:

jquery

jquery-ui

draggable

jquery-ui-resizable

1 ответ

Ещё вопросы

SpaceDog · Accepted Answer · 2013-09-23T07-05-00.000Z

Я думаю, что вам нужно сделать это, 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); } но это не совсем там.
Да, это немного сложнее - поэтому, если я начну перетаскивать по горизонтали, но затем (не отпуская кнопку мыши) двигаться по вертикали, вы не хотите, чтобы это изменило действие? Я подумаю над тем, как это сделать, но я думаю, что это может сбить меня с толку на действительно сайте / приложении, возможно, вам лучше использовать видимый дескриптор изменения размера (например, те, что указаны в полях вопросов / ответов / комментариев здесь). ).