Passaggio/modifica di un evento di trascinamento dell'interfaccia utente jQuery

Question

Vorrei che gli utenti fossero in grado di trascinare la barra dei menu orizzontale verso sinistra e verso destra. Mi rendo conto che ci sono molte librerie di caroselli e cursori che hanno questo comportamento, ma nessuno di loro si adatta alla situazione.

Quando gli utenti trascinano un LI, può passare le nuove informazioni x-offset a margine sinistro del primaLI?

ho preso una pugnalata a qui: http://jsfiddle.net/n92ng9uz/

Il problema principale con il violino sopra, è che il è ancora applicata al singolo LI compensato, e se io impedire l'evento dalla zampillante il trascinamento non è un più liscio.

Grazie per qualsiasi aiuto/guida!

Answer 1

Dal momento che si è specificato nei commenti che si tratta di un obbligo di utilizzare margin-left sul primo li elemento, e non modificare la posizione del ul, io sono abbastanza sicuro che non può essere fatto facilmente usando jQuery UI trascinabili. Se dovessimo spostare il file li trascinabile, non cattureremmo gli eventi del mouse sugli altri li s, e se dovessimo rendere trascurabile lo ul, non potremmo facilmente farlo influenzare solo lo e non il posizione del ul.

Ecco una demo live di una soluzione che utilizza gli eventi del mouse direttamente invece di utilizzare jQuery UI:

var firstLI = $('li:first-child'); 
 

 
var initx = 0; 
 
var dragstartx = 0; 
 
var dragging = false; 
 

 
$("ul").mousedown(function(e) { 
 
    dragging = true; 
 
    dragstartx = e.pageX; 
 
    initx = parseInt(firstLI.css("marginLeft"), 10); 
 
}); 
 

 
$("ul").mousemove(function(e) { 
 
    if (dragging) { 
 
     firstLI.css("marginLeft", (initx + e.pageX - dragstartx) + "px"); 
 
    } 
 
}); 
 

 
$("ul").mouseleave(function(e) { 
 
    dragging = false; 
 
}); 
 

 
$("ul").mouseup(function(e) { 
 
    dragging = false; 
 
});

ul { 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    white-space: nowrap; 
 
    -webkit-touch-callout: none; 
 
    -webkit-user-select: none; 
 
    -khtml-user-select: none; 
 
    -moz-user-select: none; 
 
    -ms-user-select: none; 
 
    user-select: none; 
 
} 
 

 
ul > li { 
 
    display: inline-block; 
 
    padding: 10px; 
 
} 
 

 
ul > li:nth-child(odd) { 
 
    background: orangered; 
 
} 
 

 
ul > li:nth-child(even) { 
 
    background: gold; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<ul> 
 
    <li>Link 1</li> 
 
    <li>Link 2</li> 
 
    <li>Link 3</li> 
 
    <li>Link 4</li> 
 
    <li>Link 5</li> 
 
    <li>Link 6</li> 
 
    <li>Link 7</li> 
 
    <li>Link 8</li> 
 
    <li>Link 9</li> 
 
    <li>Link 10</li> 
 
</ul>

JSFiddle Versione: https://jsfiddle.net/n92ng9uz/2/

Answer 2

Non funziona? Aggiungere il margine allo ul? Sembra funzionare nel violino!

var ul = $('ul'); 

ul.draggable({ 
    axis: 'x', 
    drag: function(e, ui) { 
     ul.css({marginLeft: ui.position - ui.originalPosition}); 
    } 
}); 

Answer 3

Se si desidera che gli utenti siano in grado di liberamente trascinare la barra di navigazione e allora dovrebbe goccia nello stesso luogo allora si può provare il plugin jQuery papà. È di gran lunga il miglior plug-in di trascinamento che ho usato per la semplicità del codice.

Click here per vedere la sua demo e documentazione se lo si desidera.

Answer 4

EDIT: Nevermind ... capito ... È necessario spostare ogni elemento lasciato dalla differenza di posizione. Penso che questo sia quello che stai cercando: http://jsfiddle.net/xwesf1Lt/. Dimmi se mi sbaglio. Notare che ho cambiato la variabile diff solo alla posizione sinistra.

Inoltre, invece di modificare il margine, alteriamo l'attributo di sinistra.

var firstLI = $('ul:first-child')[0]; 
firstLI.style.marginLeft = 0; 

$('li').draggable({ 
    axis: 'x', 
    drag: function(e, ui) { 
     var diff = ui.position.left; 
     console.log(diff); 
     var currentLeft = parseInt(firstLI.style.marginLeft, 10); 
     var offset = currentLeft + diff + 'px'; 
     //firstLI.style.marginLeft = diff; 
     // to drag all of them: 

     $("li").each(function(index) { 
      $(this).css("left", offset); 
     }); 

     // with this enabled, can only be moved 1px at a time..? 
     // e.preventDefault(); 
    } 
});