如何使用 jquery ui 可拖动突出显示悬停时的可放置​​区域 [英] How do I highlight a droppable area on hover using jquery ui draggable

问题描述

我实际上有两个问题，标题中的 on 是主要问题.我在标记为可放置的页面上有多个 div 元素.在这些 div 元素中，我有标记为可拖动的跨度.我想要它，所以当您拖动一个元素并将其悬停在可放置区域上时，该区域要么突出显示，要么具有边框，以便他们知道可以将其放置在那里.

I actually have two questions, the on in the title being the main one. I have multiple div elements on the page marked as droppable. Inside these div elements I have spans that are marked as draggable. I want it so when you are dragging an element and it is hovered over a droppable area that area either highlights or has a border so they know they can drop it there.

作为第二个问题，我所有的可拖动元素都有一个 display:block、一个宽度和一个浮点数，所以它们在我的可放置区域看起来很漂亮和整洁.当物品被丢弃时，它们似乎被设置为它们的位置，因为它们不再像我的其他物品那样漂亮而整洁.作为参考，这是我的 javascript.

As secondary question, all my draggable elements have a display:block, a width and a float on them, so they look nice and neat in my droppable areas. When items are dropped they seem to get a position set to them as they no longer float nice and neat like the rest of my items. For reference, here is my 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();
}

推荐答案

查看 http://jqueryui.com/演示/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!" );
    }
});

这篇关于如何使用 jquery ui 可拖动突出显示悬停时的可放置​​区域的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！