Как выделить область droppable при наведении курсора с помощью jquery ui draggable

У меня на самом деле есть два вопроса: включение в заголовок является основным. У меня есть несколько элементов div на странице, помеченной как droppable. Внутри этих элементов div есть промежутки, которые отмечены как перетаскиваемые. Я хочу, чтобы это было, когда вы перетаскиваете элемент, и он зависает над недоступной областью, в которой выделяются или выделяются границы, чтобы они знали, что они могут ее там отбросить.

В качестве второстепенного вопроса все мои перетаскиваемые элементы имеют дисплей: блок, ширину и поплавок, поэтому они выглядят красиво и аккуратно в моих областях сбрасываемых объектов. Когда элементы упали, они, похоже, получают позицию, установленную для них, поскольку они больше не плавают славными и аккуратными, как остальные элементы. Для справки, вот мой 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();
}

Ответы

Ответ 1

Отъезд http://jqueryui.com/demos/droppable/#visual-feedback.

Пример:

$( "#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!" );
    }
});

Ответ 2

Это должно работать над добавлением подсветки при наведении.

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

Затем создайте класс css для выделения, который устанавливает границу или меняет цвет фона или что бы вы ни хотели.

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

Что касается позиции, вы можете повторно применить css после завершения кавычки.

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

Ответ 3

FYI: hoverClass устарел в пользу classes. Теперь это должно быть:

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