2015-06-04 4 views
0

Я хочу реализовать перемещение элементов между вкладками с помощью jquery ui. Если я хочу, чтобы элемент drop на другой вкладке - droppable block (.elements) не захватывает событие hover (контур не хочет применяться), но отбрасывание работает правильно.jQuery ui drop (move) элементы между вкладками

$("#tabs").tabs(); 
$('.elements').children().draggable({ 
    appendTo: 'body', 
    opacity: 0.9, 
    helper: "clone", 
    zIndex: 1000, 
    cursorAt: { left: 50, top: 20 }, 
}); 

// drop into needle element 
$('.elements').droppable({ 
    accept: '.element', 
    tolerance: 'pointer', 
    activeClass: "can-drop", 
    hoverClass: "drop-here", 
    drop: function(event, ui) { 
     alert('Drop'); 
    } 
}); 

// drop 
$('.ui-tabs-nav').children().droppable({ 
    accept: '.element', 
    tolerance: 'pointer', 
    over: function(event, ui) {   
     $("#tabs").tabs("option", "active", 1); 
    } 
}) 

Вы можете увидеть my example on jsfiddle.

Может кто-нибудь мне помочь? Как я могу это исправить?

Спасибо!

+0

Я думаю, что вам нужно что-то вроде ** [этот вопрос здесь] (HTTP: //stackoverflow.com/questions/19637425/struggling-with-jquery-ui-sortable-and-tabs-would-like-to-move-items-around-tab)** и ** [это демо здесь] (http : //jsfiddle.net/zeTP8/) ** –

+0

Нет, мне не нужно отбрасывать элемент в кнопку табуляции. Мне нужна вкладка переключателя, когда курсор находится над кнопкой вкладки, и перейдите в новое содержимое вкладки (могут быть две или более недоступные области). – Andrii

+0

я уже нашел ответ на мой вопрос: перетаскиваемые имеет функцию для сброса смещения: '$ .ui.ddmanager.prepareOffsets (ui.draggable.draggable («экземпляр»));' примера работы [здесь] (http://jsfiddle.net/mcAndry/h7raxjyu/4/) – Andrii

ответ

0

я уже нашел ответ на мой вопрос: перетаскиваемым имеет функцию для сброса смещения:

$.ui.ddmanager.prepareOffsets(ui.draggable.draggable('instance')); 

Практический пример является here

Смежные вопросы