Wie markiere ich einen Drop-Bereich bei Hover mit jquery Ui ziehbare

Question

Ich habe eigentlich zwei Fragen, die im Titel der wichtigste ist. Ich habe mehrere div-Elemente auf der Seite, die als "droppable" markiert sind. Innerhalb dieser div-Elemente habe ich Spannen, die als ziehbar markiert sind. Ich will es so, wenn du ein Element ziehst und es über einem abwerfbaren Bereich schwebt, der entweder hervorgehoben wird oder einen Rand hat, damit er weiß, dass er es dort ablegen kann.

Als zweitrangige Frage haben alle meine ziehbaren Elemente eine Anzeige: Block, eine Breite und ein Schwimmer auf ihnen, so dass sie schön und ordentlich in meinen Droppable-Bereichen aussehen. Wenn Gegenstände fallen gelassen werden, scheinen sie eine Position zu bekommen, da sie nicht mehr so ​​gut und ordentlich wie die anderen meiner Gegenstände schweben. Als Referenz, hier ist mein 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

Auschecken 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

Dies sollte für das Hinzufügen eines Highlight auf schweben arbeiten.

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

Dann erstellen Sie eine CSS-Klasse für Highlight, die die Grenze setzt oder ändert die Hintergrundfarbe oder was auch immer Sie möchten.

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

Was die Position angeht Sie CSS erneut anwenden können, wenn der Tropfen vollständig ist.

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

Answer 3

FYI: hoverClass wurde zugunsten von classes Option ist veraltet. Es sollte nun sein:

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