seccion - Deshabilitar enlaces al hacer clic y arrastrar para desplazarse(jQuery)
link a seccion especifica de otra pagina wordpress (2)
basado en su ejemplo esto parece funcionar en violín.
<head>
<title>iPhone Test</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// Set drag scroll on first descendant of class dragger on both selected elements
$(''.dragger'').
draggable({ start:function(){ console.log("HI");
}});
});
</script>
</head>
Ver violín: http://jsfiddle.net/mrcarllister/Z2GjN/
Básicamente, tengo el clic-arrastre-desplazamiento que funciona EXCEPTO cuando hace clic y arrastra en un ancla / enlace.
Solo parece ser que cuando el cursor del mouse permanece en el enlace en el lanzamiento, se sigue la url (por ejemplo, si se arrastra lo suficiente y el enlace está fuera de la ventana, funciona bien).
;(function($){
$.fn.scrollsync = function( options ){
var settings = $.extend(
{
targetSelector:'':first'',
axis: ''xy''
},options || {});
function scrollHandler(event) {
if (event.data.xaxis){
event.data.followers.scrollLeft(event.data.target.scrollLeft());
}
if (event.data.yaxis){
event.data.followers.scrollTop(event.data.target.scrollTop());
}
}
settings.target = this.filter(settings.targetSelector).filter('':first'');
settings.followers=this.not(settings.target); // the rest of elements
settings.xaxis= (settings.axis==''xy'' || settings.axis==''x'') ? true : false;
settings.yaxis= (settings.axis==''xy'' || settings.axis==''y'') ? true : false;
if (!settings.xaxis && !settings.yaxis) return;
settings.target.bind(''scroll'', settings, scrollHandler);
};
})( jQuery );
;(function($){
$.fn.dragscrollable = function( options ){
var settings = $.extend(
{
dragSelector:''>:first'',
acceptPropagatedEvent: true,
preventDefault: true
},options || {});
var dragscroll= {
mouseDownHandler : function(event) {
if (event.which!=1 ||
(!event.data.acceptPropagatedEvent && event.target != this)){
return false;
}
event.data.lastCoord = {left: event.clientX, top: event.clientY};
$.event.add( document, "mouseup",
dragscroll.mouseUpHandler, event.data );
$.event.add( document, "mousemove",
dragscroll.mouseMoveHandler, event.data );
if (event.data.preventDefault) {
event.preventDefault();
return false;
}
},
mouseMoveHandler : function(event) {
var delta = {left: (event.clientX - event.data.lastCoord.left),
top: (event.clientY - event.data.lastCoord.top)};
event.data.scrollable.scrollLeft(
event.data.scrollable.scrollLeft() - delta.left);
event.data.scrollable.scrollTop(
event.data.scrollable.scrollTop() - delta.top);
event.data.lastCoord={left: event.clientX, top: event.clientY}
if (event.data.preventDefault) {
event.preventDefault();
return false;
}
},
mouseUpHandler : function(event) {
$.event.remove( document, "mousemove", dragscroll.mouseMoveHandler);
$.event.remove( document, "mouseup", dragscroll.mouseUpHandler);
if (event.data.preventDefault) {
event.preventDefault();
return false;
}
}
}
this.each(function() {
var data = {scrollable : $(this),
acceptPropagatedEvent : settings.acceptPropagatedEvent,
preventDefault : settings.preventDefault }
$(this).find(settings.dragSelector).
bind(''mousedown'', data, dragscroll.mouseDownHandler);
});
};
})( jQuery );
1.
Estoy bastante seguro de que tengo que ''devolver: falso''; para anclas, pero no estoy seguro de cómo hacerlo SOLAMENTE cuando arrastra / desplaza.
Cualquier ayuda sería apreciada.
EDITAR - La sugerencia de Ian funcionó, pero solo necesito un par de enmiendas:
- Solo desplácese hacia arriba y hacia abajo (no hacia la izquierda ni hacia la derecha)
- Estar restringido al contenido / tamaño div, y no desplazarse más.
--- >>>>>>>>>>>>>
Aclamaciones,
Carl
Muy bien, el problema aquí es que utiliza el mouse hacia arriba y hacia abajo para que funcione, por lo que puede deshabilitar el ancla permanentemente o funcionará, por lo que debe tener alguna lógica comercial para decir cuando está encendida o apagada. Si quieres editar dragscrollable, ponlo en el código y funcionará
yo añadí
event.data.initCoord = event.data.lastCoord
a mouseDownHandler y agregué
if(event.data.lastCoord != event.data.initCoord){
obj = $(this);
$(''a'', obj).on(''click'', function(event) {
event.preventDefault();
});
setTimeout(function(){$(''a'', obj).off(''click''); },300);
}
a mouseUpHandler y prendí preventdefault
$(''#viewport, #inner'').
dragscrollable({dragSelector: ''.dragger:first'', preventDefault: true});