如何使用jQuery UI Draggable在悬停时突出显示可放置区域

Question

我实际上有两个问题，标题中的问题是主要的。页面上有多个标记为droppable的div元素，在这些div元素内部，有一些被标记为draggable的span元素。我希望当你拖动一个元素并将其悬停在droppable区域时，该区域会高亮显示或者出现边框，以便他们知道可以在那里放置它。

作为第二个问题，所有我的可拖动元素都有display:block、width和float属性，所以它们在我的droppable区域看起来很整洁。但是，当项目被丢弃后，它们似乎会获得一个位置，并且不再像其他项目那样漂亮地对齐。供参考，这是我的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();
}

- Jhorra

---

你看过 http://jqueryui.com/demos/droppable/#visual-feedback 吗？ - j08691

就是这样，太明显了。 - Jhorra

那我就把它作为答案发布。 - j08691

Answer 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!" );
    }
});

- j08691

Answer 2

在鼠标悬停时添加高亮效果，这应该可以工作。

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

然后创建一个CSS类名为highlight，该类可以设置边框或更改背景颜色或任何你想要的样式。

.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();
}

- J. Celestino

---

+1 感谢您编写了“drop: handle_drop_patient”。我现在知道可以编写一个单一的函数，然后将其名称放在那里，而不是其完整的实现，例如匿名函数。 - Will Marcouiller

Answer 3

提示: hoverClass已被弃用，推荐使用classes选项。现在应该这样做:

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

- Damien Roche