JQuery UI Droppable: изменение размера элемента при наведении не работает - PullRequest
Новая
       3

JQuery UI Droppable: изменение размера элемента при наведении не работает

5 голосов
/ 24 октября 2011

У меня есть перетаскиваемый элемент jQuery UI, который я хотел бы увеличить при наведении на него перетаскиваемого элемента. Я пробовал использовать как параметр hoverClass, так и привязку к событию drophover.

Визуально оба эти метода работают нормально. Тем не менее, как только перетаскиваемый объект выходит за исходную (меньшую) границу предмета сброса, пользовательский интерфейс jQuery интерпретирует это как «исключение», несмотря на то, что он все еще находится в пределах текущей (большей) границы.

Например, js: 

$("#dropable").droppable({
    hoverClass: 'hovering'
}.bind('dropout', function () {console.log('dropout')});

CSS: 

#droppable { background: teal; height: 10px; }
#droppable.hovering { height: 200px; }

В этом случае, когда перетаскиваемый объект зависает над опускаемым предметом, опускаемый предмет визуально увеличивается в размере до 200 пикселей. Если в этот момент перетаскиваемый объект перемещается вниз на 20 пикселей, я ожидаю, что он все еще будет зависать над опускаемым предметом. Вместо этого пользовательский интерфейс jQuery запускает событие dropout, и значение droppable возвращается к 10px в высоту.

Кто-нибудь знает, как заставить его вести себя так, как я ожидал?

jsFiddle пример: http://jsfiddle.net/kWFb9/

Ответы [ 4 ]

4 голосов
/ 02 июля 2014

У меня была такая же проблема, я смог ее решить, используя следующие опции: 

$("#droppable").droppable({
    hoverClass: 'hovering',
    tolerance: 'pointer'
});

$('#draggable').draggable({
    refreshPositions: true
});

Вот рабочая скрипка: http://jsfiddle.net/kWFb9/51/

См. http://bugs.jqueryui.com/ticket/2970

2 голосов
/ 27 ноября 2011

Итак, я сделал пару твиков для вашей скрипки

Сначала я установил допустимое отклонение для «касания», которое будет активироваться всякий раз, когда какая-либо часть перетаскиваемого элемента будет касаться его.Это вызывает применение класса зависания.

Затем я добавил анимацию, чтобы немного изменить размер перетаскиваемого элемента.Я не был уверен, нужна ли вам эта функциональность, или нет, поэтому я все равно ее туда включил.

Наконец, я навсегда применяю класс зависания к элементу droppable, когда перетаскиваемый элемент помещается в зону сбрасывания.Таким образом, пипетка не возвращается на ту узкую высоту, когда в ней есть элемент

http://jsfiddle.net/kWFb9/2/

РЕДАКТИРОВАТЬ:

Лучшая скрипка: http://jsfiddle.net/kWFb9/6/

Надеюсь, это поможет:)

1 голос
/ 24 октября 2011

Вы можете создать большее (т.е. размер # droppable.hovering) div без фона и применить к нему свой сброс.Обратите внимание, что вы не предоставили HTML, но новый #drop_container должен содержать оба div.

JS 

var dropped;
$("#droppable").droppable({
    drop: function(event, ui) {
        dropped = true;
    }
});

$('#draggable').draggable({
    start: function(event, ui) {
        $("#droppable").addClass("hovering");
        dropped = false;
    },
    stop: function(event, ui) {
        if (!dropped) {
            $("#droppable").removeClass("hovering");
        }
    }
});

CSS 

#droppable { background: teal; height: 10px; }
#droppable.hovering, #drop_container { height: 200px; }

Или вы можете попробовать другойрешение с .live() или .livequery() из этой статьи

[РЕДАКТИРОВАТЬ] Я отредактировал свой код и вот jsfiddle: http://jsfiddle.net/94Qyc/1/

У меня былочтобы использовать глобальную переменную, я не нашел лучшего способа проверить, была ли выброшена коробка.Если у кого-то есть идея, это было бы здорово.

0 голосов
/ 28 августа 2014

Есть и другое (гул хум) неплохое решение:

TL; DR : Скрипка

Проблема в том, что плагин хранит значения размера элемента dom при создании виджета (что-то вроде): 

//jquery.ui.dropable.js
$.widget("ui.droppable", {
   ...
    _create: function() {

    var proportions,
       this.proportions = function() { return proportions; }

И смещение для виджетов инициализируется в $ .ui.ddmanager.prepareOffsets (); Поэтому нам нужно только перезаписать объект пропорций.

Таким образом позволяет получить доступ к реальным свойствам плагина, чтобы мы могли написать что-то вроде: 

$("#droppable").droppable({
    hoverClass: 'hovering',
    over: function(ev, ui) {
        var $widget = $(this).data('droppable');
        $widget.proportions = {
            width: $(this).width(),
            height: $(this).height()
        };    
    },
    out: function(ev, ui) {
        var $widget = $(this).data('droppable'); //ui-droppable for latests versions
        $widget.proportions = {
            width: $(this).width(),
            height: $(this).height()
        };
    }
})
...