Come evidenziare un'area trascinabile al passaggio del mouse usando jquery ui draggable

Question

In realtà ho due domande, l'on nel titolo è il principale. Ho più elementi div nella pagina contrassegnati come trascinabili. All'interno di questi elementi div, ho campate contrassegnate come trascinabili. Lo voglio così quando stai trascinando un elemento ed è aleggiato sopra un'area trascinabile in quell'area evidenzia o ha un bordo in modo che sappiano che possono lasciarlo lì.

Come domanda secondaria, tutti i miei elementi trascinabili hanno un display: blocco, una larghezza e un galleggiante su di essi, quindi sono belli e ordinati nelle mie aree trascinabili. Quando gli oggetti vengono rilasciati, sembra che ottengano una posizione impostata su di loro poiché non galleggiano più in modo piacevole e ordinato come il resto dei miei oggetti. Per riferimento, ecco il mio 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

Check out http://jqueryui.com/demos/droppable/#visual-feedback.

Es:

$("#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

Questo dovrebbe funzionare per l'aggiunta di un punto culminante al passaggio del mouse.

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

quindi creare una classe CSS per clou che imposta il bordo o cambia il colore di sfondo o qualsiasi altra cosa vuoi.

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

Per quanto riguarda la posizione, è possibile riapplicare il codice CSS una volta completato il rilascio.

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

Answer 3

FYI: hoverClass è stato deprecato in favore di classes opzione. Ora dovrebbe essere:

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