水平滑塊 - 移動抓取觸發鏈接

Question

我想創建一個帶有鏈接的水平畫廊，但問題是，當我想移動mousedown和mousemove在畫廊中的元素，但隨後在mouseup上重新定位（在整個點擊事件）我該如何解決這個問題？有任何想法嗎 ？

DEMO：jsfiddle

JS

(function() { 
    var x, 
    y, 
    top, 
    left, 
    down; 

    $("ul").mousedown(function(e) { 
    e.preventDefault(); 
    down = true; 
    x = e.pageX; 
    y = e.pageY; 
    left = $(this).scrollLeft(); 
    $(this).addClass("grabbing"); 
    }); 

    $("ul a").mousedown(function(e) { 
    e.preventDefault(); 
    }); 

    $("ul").mousemove(function(e) { 
    if (down) { 
     var newX = e.pageX; 
     var newY = e.pageY; 
     $("ul").scrollLeft(left - newX + x); 
    } 
    }); 

    $("ul").mouseup(function(e) { 
    down = false; 
    $(this).removeClass("grabbing"); 
    }); 
})(); 

Answer 1

我建議增加一個DIV爲紐帶，和治療的圖片作爲grabable東西。

但你可以做這樣的事情：

(function() { 
 
    var x, 
 
    y, 
 
    top, 
 
    left, 
 
    down; 
 

 
    $("ul").mousedown(function(e) { 
 
    e.preventDefault(); 
 
    down = true; 
 
    x = e.pageX; 
 
    y = e.pageY; 
 
    left = $(this).scrollLeft(); 
 
    $(this).addClass("grabbing"); 
 
    }); 
 

 
    $("a").mouseup(function(e) { 
 
    e.preventDefault(); 
 
    console.log('test'); 
 
    }); 
 

 
    $("ul").mousemove(function(e) { 
 
    if (down) { 
 
     var newX = e.pageX; 
 
     var newY = e.pageY; 
 
     $("ul").scrollLeft(left - newX + x); 
 
    } 
 
    }); 
 

 
    $("a").click(function(e) { 
 
    e.preventDefault(); 
 
    }); 
 
    
 
$("a").mouseup(function(e) { 
 
    down = false; 
 
    $(this).removeClass("grabbing"); 
 
    var newerX = e.pageX; 
 
     
 
    if(newerX !== x) { // Instead of x you can use newX 
 
     
 
    \t // Do nothing with the click if there is scrolled 
 
     
 
    } else { 
 
     
 
     // Go to link anyway 
 
     \t window.location = this.href; 
 
     
 
    } 
 
    }); 
 
})();

Answer 2

您也可以使用這樣的： https://jsfiddle.net/4jn4a58e/7/

(function() { 
 
    var x, 
 
    y, 
 
    top, 
 
    left, 
 
    down, 
 
    moved; 
 

 
    $("ul").mousedown(function(e) { 
 
    e.preventDefault(); 
 
    \t moved = false; 
 
    down = true; 
 
    x = e.pageX; 
 
    y = e.pageY; 
 
    left = $(this).scrollLeft(); 
 
    $(this).addClass("grabbing"); 
 
    }); 
 

 
    $("ul a").mousedown(function(e) { 
 
    e.preventDefault(); 
 
    }); 
 

 
    $("ul").mousemove(function(e) { 
 
    if (down) { 
 
    \t \t moved = true; 
 
     var newX = e.pageX; 
 
     var newY = e.pageY; 
 
     $("ul").scrollLeft(left - newX + x); 
 
    } 
 
    }); 
 

 
    $("ul").mouseup(function(e) { 
 
    \t down = false; 
 
    \t $(this).removeClass("grabbing"); 
 
    }); 
 
    
 
    $("ul a").click(function(e) { 
 
    if (moved) { 
 
    \t e.preventDefault(); 
 
    } 
 
    }); 
 
})();

ul { 
 
    height: 150px; 
 
    width: 500px; 
 
    position: relative; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    cursor: grab; 
 
    &.grabbing { 
 
    cursor: grabbing; 
 
    } 
 
    li { 
 
    display: inline-block; 
 
    height: 150px; 
 
    width: 150px; 
 
    position: absolute; 
 
    background: red; 
 
    @for $i from 2 through 6 { 
 
     &:nth-of-type(#{$i}) { 
 
     left: (155px * $i) - 155; 
 
     background: #123123 * $i; 
 
     } 
 
    } 
 
    a { 
 
     display: block; 
 
     height: 100%; 
 
     width: 100%; 
 
    } 
 
    } 
 
}

<ul> 
 
    <li> 
 
    <a href="google.com"></a> 
 
    </li> 
 
    <li> 
 
    <a href="google.com"></a> 
 
    </li> 
 
    <li> 
 
    <a href="google.com"></a> 
 
    </li> 
 
    <li> 
 
    <a href="google.com"></a> 
 
    </li> 
 
    <li> 
 
    <a href="google.com"></a> 
 
    </li> 
 
    <li> 
 
    <a href="google.com"></a> 
 
    </li> 
 
</ul>