Перетаскиваемый пересечение JQuery отбрасывается по краю

У меня есть перетаскиваемый с большим запасом и допуском пересечения. Когда я перетаскиваю его в раскрывающееся поле, в большинстве случаев он работает. Однако, если я попытаюсь бросить его ближе к ВЕРХУ выпадающего поля, он не упадет должным образом, потому что поле рассчитывается как часть высоты.

Может ли кто-нибудь предложить обходной путь для этого? Я попытался удалить границу в начале перетаскивания, но это приводит к странным прыжкам перетаскиваемого объекта, когда вы впервые берете его.

$(".draggable").draggable({
    helper: 'clone',
    cursor: 'move'
})

$( ".droppable" ).droppable({
tolerance: 'intersect',
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" );
}})

http://jsfiddle.net/wQvWK/6/


jquery draggable margin
person Kristi Simonson    schedule 17.01.2014    source источник
comment
Я никак не мог заставить его правильно попасть на твою скрипку.   -  person CodeToad    schedule 18.01.2014
comment
+1 за добавление кода и скрипки с четким описанием   -  person CodeToad    schedule 18.01.2014
comment
Допуск — это свойство droppable, а не draggable. посмотрите на этот отчет об ошибке: bugs.jqueryui.com/ticket/2304. любопытно, что о нем сообщили и закрыли как исправлено   -  person CodeToad    schedule 18.01.2014
comment
Спасибо. Я обновил код.   -  person Kristi Simonson    schedule 18.01.2014

Ответы (2)


arrow_upward
1
arrow_downward

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

var marginTop = 150;
$(".draggable").draggable({
        helper: 'clone',
        cursor: 'move',
        stop: function(event, ui){
            if($('.droppable').position().top-$(this).height()/2 < ui.position.top+marginTop
              && $('.droppable').position().top+$('.droppable').height() > ui.position.top+marginTop+$(this).height()-$(this).height()/2
              && $('.droppable').position().left-$(this).width()/2 < ui.position.left
              && $('.droppable').position().left+$('.droppable').width() > ui.position.left+$(this).width()-$(this).width()/2) 
               {
                $('.droppable')
                .addClass( "ui-state-highlight" )
                .find( "p" )
                .html( "Dropped!" );
            }
        }
    });

Пример:

http://jsfiddle.net/trevordowdle/wQvWK/5/

person Trevor    schedule 17.01.2014

arrow_upward
1
arrow_downward

Я изучил этот вопрос и считаю, что вам нужно будет либо отбросить маржу (сделать маржу внизу на элементе над ней), либо обезьяна-патч код пользовательского интерфейса jQuery для учета маржи в этом случае.

Я изменил допуск droppable в этой скрипте: http://jsfiddle.net/wQvWK/2/ До того, как я это сделал, он никогда не падал.

 $( ".droppable" ).droppable({
   tolerance: 'intersect',
 drop: function( event, ui ) {
 $( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" );
}})
person CodeToad    schedule 17.01.2014