jquery draggable i mouseover

Question

Obecnie mam kilka menu rozwijanych, które otwierają się na myszy. Wdrażam niektóre funkcje przeciągania i upuszczania za pomocą przeciągania i upuszczania z jquery ui. Wydaje się, że zdarzenia mouseover dla menu nie są uruchamiane podczas przeciągania, czy istnieje sposób, aby umożliwić im działanie?

I zostały wdrożone w następujący sposób (uproszczony):

$('#some_id').draggable({ helper: 'clone', opacity: 0.35, zIndex: 20000, cursor: 'move' }); 
$('#some_menu').live('mouseenter click', function(){jThis.find('div').addClass('opened');}); 

Answer 1

Właśnie dowiedziałem się, że jest to bardzo logiczny problem. Gdy zaczniesz przeciągać element, będzie on znajdował się pod wskaźnikiem myszy, a więc po prostu będzie on wisiał nad bieżącym elementem przez cały czas !!

A (nie tak bardzo) rozwiązaniem jest ustawienie opcji cursorAt więc wskaźnik myszy znajduje się poza przeciągany element:

$('#some_id').draggable({ 
     cursorAt: {left: -10, top: -10} 
}); 

byłoby o wiele ładniejszy, jeśli istnieje sposób, aby w jakiś sposób przekazać myszy wskaźnik pod przeciąganym elementem, ale jak dotąd nie znalazłem na to rozwiązania.

Mam nadzieję, że to trochę pomoże!

Answer 2

Można napisać procedurę obsługi zdarzeń przeciągania dla przeciągania, która sprawdza, czy kursor znajduje się nad elementem, który ma obsłużyć zdarzenie mouseover. Musisz sam wykryć przesunięcie kursora myszy za pomocą metod jQuery offset(), width() i height() dla elementu statycznego i albo pozycji kursora z obiektu zdarzenia dla zdarzenia przeciągania lub własnego zestawu ui.jq jQuery, w zależności od tego, który z nich lepiej pasuje do celu. .

Inną opcją, mniej elegancką, ale prawdopodobnie łatwiejszą do implementacji, byłoby sprawienie, aby element statyczny był zrzucany, w takim przypadku jQuery UI pozwala obsługiwać zdarzenia, gdy przeciągany nad nim mechanizm przeciągania. Możesz wtedy zapobiec upuszczeniu, jeśli naprawdę nie chcesz na to pozwolić.

Answer 3

Można to osiągnąć, używając opcji "over:" i "out:", gdzie zdefiniowana jest opcja droppable.

$(".droppable").droppable({ 
    accept: '.draggable', 
    over: function(event, ui) { 
     $(this).addClass('temporaryhighlight'); 
    }, 
    out: function(event, ui) { 
     $(this).removeClass('temporaryhighlight'); 
    },  
    drop: function() { 
     //do some stuff 
    } 
}); 

W swoim scenariuszu, chociaż trzeba by dokonać menu droppable, który Zgaduję nie jest dokładnie to, co chcesz (jestem zakładając próbujesz spaść do czegoś, co jest w menu, a nie całe menu). Być może po prostu nie rób nic lub wróć do dropu: funkcja na tych przedmiotach ...?

Kredyty i więcej informacji:

http://forum.jquery.com/topic/draggable-highlighting-custom-div-on-droppable-hover

http://jsfiddle.net/nickadeemus2002/wWbUF/1/

Answer 4

Jak Marcel Paans wskazane problemem jest to, że kije pomocnicze pod kursorem myszy.

Rozwiązaniem jest ustawienie właściwości CSS pointer-events na none na elemencie pomocniczym. Dzięki temu zdarzenia wskaźnika będą wywoływane przez elementy znajdujące się pod pomocnikiem.

Można to łatwo zrobić poprzez dostarczanie opcję pomocnika z zwrotnego do generowania element pomocniczy:

$('#some_id').draggable({ 
    helper: function() { 
     return $(this).clone().css("pointer-events","none").appendTo("body").show(); 
    } 
}); 

Answer 5

podstawie tego, co Yonatan pisał:

Twoje JS:

$('#some_id').draggable({ 
    helper: 'clone', 
    opacity: 0.35, 
    zIndex: 20000, 
    cursor: 'move' 
}); 

Po prostu dodaj to do swojego CSS:

#some_id.ui-draggable-dragging { 
    pointer-events: none; 
} 

jest trochę czystszy.