: Vurgulu sürükle ve bırak elemanına yapışıyor

Question

Basit bir yapıya sahibim ve drag'n'drop eklemek istiyorum. Ek olarak farklı renklerde vurgulu öğeyi ve dragover öğesini vurgulamak istiyorum. Ancak WebKit'te sıra dışı bir hatadır.

1. Son öğeyi yakala.
2. En üste sürükleyin.
3. İlk öğeye bırakın.

Ve son element, vurgulu psödoklassı yakalar! Niye ya? Bunu nasıl önleyebilirim?

http://jsfiddle.net/zFk2V/3/

var lis = document.querySelectorAll("li"), 
    ol = document.querySelector("ol"), 
    dragged = false, 
    dragover = false; 
ol.addEventListener("drop", function(event) { 
    ol.insertBefore(dragged,dragover); 
    this.classList.remove("insistent"); 
}, false); 
for (var i=0, n = lis.length; i < n; i++) { 
    lis[i].addEventListener("dragstart", function(event) { 
     dragged = this; 
     ol.classList.add("insistent"); 
    }, false); 
    lis[i].addEventListener("dragover", function(event) { 
     if (dragover) { 
      dragover.classList.remove("dragover"); 
     } 
     event.preventDefault(); 
     dragover = this; 
     this.classList.add("dragover"); 
    }, false); 
} 

Answer 1

Sadece bir .onmouseover ve .onmouseout işlev eklemek ve ekleme/yerine CSS en :hover kullanmanın hovered denilen bir sınıf kaldırabilirsiniz:

Bu

bir örnektir. İşte updated jsFiddle

JavaScript

lis[i].onmouseover = function() { 
    // Adds the 'hovered' class 
    this.className = this.className + " hovered"; 
} 
lis[i].onmouseout = function() { 
    // Removes the 'hovered' class 
    this.className = this.className.split(' ').filter(function(v) { 
     return v!='hovered' 
    }).join(' '); 
} 

CSS

.hovered { 
    background: #fc9; 
} 

Yan not (for döngüsü içinde) eklemektir: Ben id='dragableList' gibi ol bir kimlik eklemek ve çizgi var lis = document.querySelectorAll("li") değişebilir var lis = document.getElementById('dragableList').querySelectorAll("li") sadece projenizde daha sonra başka bir listeye sahip olmanız durumunda. Here, dahil olan jsFiddle'la birlikte

Answer 2

İşte bunu nasıl çözdüm. Maalesef biraz da JS'ye başvurmak zorunda kaldım.

Sayfamda, üzerine gelindiğinde vurgulanan daraltılmış kayıtlar var. Kayıt tıklandığında genişletilecek ve vurgulama devre dışı bırakılacak. Tekrar tıklandığında yeniden çökecek ve gezinmeye devam edeceksiniz:

$(document).on('click', ".container.clickable", function(e){ 
    var $this = $(this); 
    $this.toggleClass('expandable'); 
    if ($this.hasClass('expandable')) { 
    $this.on('mouseenter', function(){ 
     // workaround to stop a stuck :hover 
     $this.addClass('hilitable'); 
     $this.off('mouseenter'); 
    }) 
    } else { 
    $this.removeClass('hilitable'); 
    } 
});