2014-10-24 5 views
0

У меня есть сайт с элементом, в котором класс CSS имеет: зависание, показывающее контур. Это работает нормально. однако:keep: hover on dragging jquery element

  1. При запуске перетащить этот объект (часть из сортируемым) эффект парения удаляется, Jquery перетаскиваемым не держать: парить состояние.

  2. Как только вы сбросили, состояние зависания css не появится снова, я должен покинуть объект и повторно ввести его, чтобы эффект css появился.

Любой способ решить эти проблемы?

ответ

2

Добавьте класс в вашей декларации CSS, как:

.object:hover, 
.object.hover { 
    border: 1px solid red; 
} 

Добавить и удалить класс внутри вашей сортируется путем связывания для запуска и остановки, как:

$("#list").sortable({ 
    [..your other configs..], 
    start: function(e, ui){ 
     ui.item.addClass('hover'); 
     ui.helper.addClass('hover'); 
    }, 
    stop: function(e, ui){ 
     ui.item.removeClass('hover'); 
     ui.helper.removeClass('hover'); 
    } 
}); 

Если вы хотите сохранить класс зависать после падения, вы можете попробовать это вместо:

$(".object").mouseenter(function(){ 
    $(this).addClass("hover"); 
}).mouseleave(function(){ 
    $(this).removeClass("hover"); 
}); 
$("#list").sortable({ 
    [..your other configs..], 
    start: function(e, ui){ 
     ui.item.addClass('hover'); 
     ui.helper.addClass('hover'); 
    }, 
    stop: function(e, ui){ 
     // don't remove: ui.item.removeClass('hover'); 
     // don't remove: ui.helper.removeClass('hover'); 
    } 
}); 

Смотрите ее e in the fiddle: http://jsfiddle.net/9bvm63m4/

+1

приятный и легкий, мне он нравится, я не добавил второй код, поскольку первый уже добавляет класс к помощнику тоже ... –

0

Я не думаю, что такая штука реализована единообразно в браузерах, поэтому вы, вероятно, столкнетесь с различным поведением в зависимости от того, какой браузер вы используете. Лучше всего было бы добавить класс CSS к вашему элементу, когда вы используете mouseenter, и удалите класс, когда вы будете нажимать мыши.