Перетаскивание пунктирной границы

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

Добавить hoverClass вариант, а затем определить в вашем CSS этот класс не hover эффект, как вы в

.cart:hover{ 
    border: dashed } 

Try:

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

Используйте перетащить перетаскиваемую и остановить, чтобы изменить стиль границы:

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

jsFiddle example

В качестве альтернативы вы можете добавить и удалить класс для изменения границы. Если вы хотите, чтобы применить изменения, когда элемент находится над тележкой, используйте Droppable закончится и из событий вместо

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

Answer 3

Используйте опцию hoverClass из Droppable, с большой буквы :

hoverClass: "drop-hover", 

См http://jsfiddle.net/sPbmM/98/