JQuery проблема CSS при перетаскивании элемента из дерева - PullRequest
Новая
       11

JQuery проблема CSS при перетаскивании элемента из дерева

1 голос
/ 15 апреля 2011

У меня есть древовидное меню, в котором пользователь может что-то перетащить в список (например, gmail с метками).Все работает на 99%.Когда мышь наводит на элемент в древовидной структуре, цвет фона меняется (это нормально для меня).Когда мышь покидает элемент, фон снова становится белым.Проблема в том, что когда начинается перетаскивание (jquery), фон элемента изменяется и не возвращается к белому, как обычно (проблема обновления?).

Как я могу продолжить (когда начинается перетаскивание?) Эту маленькую проблему?

Я уже пробую:

$ (this) .children ().css ('background-color', '# ffffff');

Но это неприемлемо, потому что css окончательно изменен (больше нет разницы при наведении / отпускании).Мне нужно что-то вроде обновления предмета.Я вижу, что при наведении курсора мыши на элемент (после операции перетаскивания) фон снова становится белым (как и должно быть).

Снимок экрана 1 первое изображение

На этом первом снимке экрана мы видим пользовательскую мышь над элементом в древовидной структуре, поэтому цвет фона светло-синий.На этот раз без перетаскивания, так что все в порядке.

Снимок экрана 2 второе изображение

На скриншоте 2 пользователь перетаскивает элемент, и мы видим, что помощник перетаскивается.Проблема в том, что оригинал itm в виде дерева все еще синий!Раздражает ...

Если перетаскивание отменено или закончено, и пользователь наводит курсор мыши на этот синий элемент, он возвращается на белый фон, но слишком поздно ...

Iотредактируйте мой вопрос, чтобы ответить на Phortuin

@ Phortuin: события mouseenter, mouseleave управляются с помощью css, как вы можете видеть ниже: 

.treeview li{ 
  margin-top: 2px;
  margin-bottom: 2px;
  padding-left: 20px; 
  list-style: none;  
}

.treeview li a:hover
{    
  background-color: #f3f7fd;
  border-color: #bbd8fb;
  border-width: 1px;
  border-style: solid;  
}

Так что если я этого не сделаюзнаете, как действовать.

Другое решение будет состоять в том, чтобы управлять событиями mouseover / mouseleave только с помощью jquery, как вы показали мне, но, возможно, есть более простое решение (и сохранение моего css)?

Ответы [ 2 ]

1 голос
/ 17 апреля 2011

Я нашел решение, как показано ниже (с сохранением моего CSS как есть): 

    $('#treemenu1 ul li a').hover( function(){ 
        $(this).css('background-color', '#f3f7fd');
        $(this).css('border-color', '#bbd8fb');
    });

    $('#treemenu1 ul li a').mouseleave( function(){ 
        $(this).css('background-color', 'transparent');
        $(this).css('border-color', 'transparent');
    });
1 голос
/ 15 апреля 2011

Возможно, причина в том, что событие mouseLeave никогда не вызывалось (hover - это оболочка для mouseEnter и mouseLeave).Подобная конструкция будет выглядеть так: 

<a href="http://stackoverflow.com" target="_blank"><img src="/images/stackoverflow.gif" alt="" /></a>

С помощью следующего jQuery я меняю изображение при наведении: 

$("img").hover(function(){
    $(this).attr("src").val("/images/stackoverflow-hover.gif");
}, function() {
    $(this).attr("src").val("/images/stackoverflow.gif");
});

Теперь, когда я наведу курсор мыши на изображение и нажму на ссылку,сайт открывается в новой вкладке или окне, и когда я переключаюсь на свой исходный сайт, изображение все равно будет иметь изображение stackoverflow-hover.gif, потому что событие mouseLeave никогда не вызывалось.

Что вам нужно сделать, это убедиться, что поведение, которое вы хотите, на самом деле срабатывает.Вы можете сделать это: 

$("span.item").mouseenter(function(){
    $(this).addClass("active");
});
$("span.item").bind("mouseleave blur mouseout", function(){
    $(this).removeClass("active");
});

Метод связывания позволит вам привязать несколько событий к элементу, и все они приведут к одинаковому поведению.Попробуйте это с несколькими событиями, чтобы увидеть эффекты.Кроме того, вы можете узнать о том, как запускать события самостоятельно с помощью jQuery: http://api.jquery.com/trigger/ - вы можете инициировать пользовательское событие в обратном вызове метода перетаскивания: 

$("span.item").drag(function(){
    // do some dragging
}, function() {
    this.trigger("myEvents:draggingIsFinished");
});

$("span.item").bind("myEvents:draggingIsFinished", function(){
   // do stuff after dragging
});
...