Jak wyróżnić obszar zrzutu po najechaniu myszą, używając jquery ui przeciągnij

Question

Mam rzeczywiście dwa pytania, w tytule głównym. Mam wiele elementów div na stronie oznaczonej jako droppable. Wewnątrz tych elementów div mam rozpiętości, które są oznaczone jako przeciągalne. Chcę, aby tak było, gdy przeciągasz element i jest on zawieszony nad obszarem zrzucanym, który to obszar jest podświetlony lub ma ramkę, więc wie, że może ją tam upuścić.

Jako drugorzędne pytanie, wszystkie moje elementy przeciągalne mają wyświetlacz: blok, szerokość i spławik na nich, więc wyglądają ładnie i schludnie w moich obszarach, które można zrzucić. Po upuszczeniu przedmiotów wydaje im się, że ustawiają się w takiej pozycji, ponieważ nie są już unoszone ładnie i schludnie jak reszta moich przedmiotów. Dla odniesienia, tutaj jest mój javascript.

$('.drag_span').draggable({ 
    revert: true 
}); 
$('.drop_div').droppable({ 
    drop: handle_drop_patient 
}); 

function handle_drop_patient(event, ui) { 
    $(this).append($(ui.draggable).clone()); 
    $(ui.draggable).remove(); 
} 

Answer 1

Sprawdź http://jqueryui.com/demos/droppable/#visual-feedback.

Ex:

$("#draggable").draggable(); 
$("#droppable").droppable({ 
    hoverClass: "ui-state-active", 
    drop: function(event, ui) { 
     $(this) 
      .addClass("ui-state-highlight") 
      .find("p") 
       .html("Dropped!"); 
    } 
}); 
$("#draggable2").draggable(); 
$("#droppable2").droppable({ 
    accept: "#draggable2", 
    activeClass: "ui-state-hover", 
    drop: function(event, ui) { 
     $(this) 
      .addClass("ui-state-highlight") 
      .find("p") 
       .html("Dropped!"); 
    } 
}); 

Answer 2

ten powinien działać na dodanie podświetlenie przy aktywowaniu.

$('.drop_div').droppable({ 
    hoverClass: "highlight", 
    drop: handle_drop_patient, 
}); 

Następnie należy utworzyć klasę css dla podświetleniem który wyznacza granicę lub zmiany koloru tła lub cokolwiek zechcesz.

.highlight { 
    border: 1px solid yellow; 
    background-color:yellow; 
} 

Jeśli chodzi o pozycję, można ponownie zastosować css po zakończeniu upuszczania.

function handle_drop_patient(event, ui) { 
    $(this).append($(ui.draggable).clone().css({'float':'left','display':'block'})); 
    $(ui.draggable).remove(); 
} 

Answer 3

FYI: hoverClass została zastąpiona classes opcji. Teraz powinien być:

$('.drop_div').droppable({ 
    classes: { 
     'ui-droppable-hover': 'highlight' 
    }, 
    drop: handle_drop_patient 
});