Question

使用这个例子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");
    }
});

没有任何结果

Answer 1

使用droppable的hoverClass选项，使用大C：

hoverClass: "drop-hover",

请参阅http://jsfiddle.net/sPbmM/98/

Answer 2

添加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

Answer 3

使用可拖动的拖放来更改边框样式：

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

<强> jsFiddle example

或者，您可以添加和删除类来修改边框。如果您只想在商品超过购物车时应用更改，请使用可放置的事件来代替

$('.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

拖放虚线边框

3 个答案: