拖放虚线边框答案

【问题标题】：Drag&Drop dashed border拖放虚线边框
【发布时间】：2014-04-02 13:44:10
【问题描述】：

使用此示例http://jsfiddle.net/sPbmM/93/，我试图使“.cart”的边框在拖动元素超过此时变为虚线。我试过了

.cart:hover{
    border: dashed }

和

$('.cart ').droppable({
       accept: ".drag",
   hoverclass: 'hover',
    drop: function(event, ui){       
        window.location=$(ui.draggable).find("a.addtocart").attr("href");
    }
});

没有任何结果

【问题讨论】：

标签： jquery jquery-ui drag-and-drop drag

【解决方案1】：

添加 hoverClass 选项，然后在您的 CSS 中定义此类，而不是像在

中那样定义 hover 效果

.cart:hover{
    border: dashed }

试试：

$('.cart ').droppable({
       accept: ".drag",

    drop: function(event, ui){       
        window.location=$(ui.draggable).find("a.addtocart").attr("href");
    },
    hoverClass:"dashed"

});

并在 CSS 中添加：

.dashed{
    border: 5px dashed #ccc;
}

DEMO

【讨论】：

【解决方案2】：

使用 droppable 的 hoverClass 选项，带有一个大 C：

hoverClass: "drop-hover",

见http://jsfiddle.net/sPbmM/98/

【讨论】：

【解决方案3】：

使用draggable的drag and stop来改变边框样式：

$('.drag').draggable({
    revert: "invalid",
    helper: "clone",
    drag: function () {
        $('div.cart').css('borderStyle', 'dashed')
    },
    stop: function () {
        $('div.cart').css('borderStyle', 'solid')
    }
});

jsFiddle example

您也可以添加和删除一个类来修改边框。如果您只想在商品在购物车上时应用更改，请改用 droppable 的 over and out 事件

$('.cart ').droppable({
    accept: ".drag",
    over: function () {
        $('div.cart').css('borderStyle', 'dashed');
    },
    out: function () {
        $('div.cart').css('borderStyle', 'solid');
    },
    drop: function (event, ui) {
        window.location = $(ui.draggable).find("a.addtocart").attr("href");
    }
});

jsFiddle example

【讨论】：