jQuery UIドラッグイベントの受け渡し/変更

Question

私は、ユーザーが横のメニューバーを左右にドラッグできるようにしたいと思います。私は、このような動作をするカルーセルとスライダーライブラリがたくさんあることを認識していますが、状況に合ったものはありません。ユーザーがLIをドラッグすると

、それは最初LIの左マージンに新しいxオフセット情報を渡すことができますか？

私はここでそれで刺しを取っ：、上記のフィドルの主な問題http://jsfiddle.net/n92ng9uz/

オフセットは、まだ個々のLIに適用される、と私はドラッグをバブルアップからのイベントを防ぐ場合は、noですされていることですより滑らかな。

ありがとうございました！

Answer 1

あなたはそれが最初li要素にmargin-leftを使用するための要件だとコメントで指定され、そしてないulの位置を変更しているので、私はそれが簡単にjQueryのUIを使用して行うことができないことをかなり確信していますドラッグ可能。 liをドラッグ可能にする場合は、liのマウスイベントをキャッチしないで、ulをドラッグ可能にする場合は、最初のの最初のliulの位置。

ここ

ではなく、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バージョン：https://jsfiddle.net/n92ng9uz/2/

Answer 2

これはどうでしょうか？ ulにマージンを追加しますか？フィドルで働くようだ！

var ul = $('ul'); 

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

Answer 3

は、ユーザーが自由にナビゲーションバーをドラッグし、それが同じ場所でドロップは、あなたはjqueryのお父さんプラグインを試すことができるはずですにできるようにしたい場合。私が使ってきたドラッグ＆ドロッププラグインは、コードの簡潔さには一番優れています。

Click here希望する場合は、デモとドキュメントをご覧ください。

Answer 4

EDIT：Nevermind ...考え出しました...位置の差だけ左に移動する必要があります。私はこれがあなたの後のものだと思う：http://jsfiddle.net/xwesf1Lt/。私が間違っているかどうか教えてください。 diff変数をちょうど左の位置に変更したことに注意してください。

また、余白を変更する代わりに、左の属性を変更します。

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(); 
    } 
});