以下是我目前所处的事情：
Number.prototype.roundTo = function(nTo) {
nTo = nTo || 10;
return Math.round(this * (1 / nTo)) * nTo;
};
$(function() {
var slides = $('#slider ul').children().length;
var slideWidth = $('#slider').width();
var min = 0;
var max = -((slides - 1) * slideWidth);
console.log("Slides: " + slides + ", Width: " + slideWidth + ", min: 0, max: " + max);
$("#slider ul").width(slides * slideWidth);
$("#slider ul").draggable({
axis: 'x',
drag: function(event, ui) {
if (ui.position.left > min) ui.position.left = min;
if (ui.position.left < max) ui.position.left = max;
},
stop: function(event, ui) {
$(this).animate({
left: (ui.position.left).roundTo(slideWidth)
});
}
});
});#portfolio {
background: #3aa756;
min-height: 100%;
height: 100%;
}
#portfolio-left {
background: #ccc;
display: inline-block;
min-height: 100vh;
padding-left: 0;
padding-right: 0;
}
#portfolio-right {
background: #ded;
min-height: 100vh;
padding-left: 0;
padding-right: 0;
float: right;
}
#portfolio #slider {
width: 400px;
overflow: hidden;
}
#slider ul {
list-style: none;
margin: 0;
padding: 0;
}
#slider li {
width: 400px;
height: 100vh;
float: left;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<section class="no-padding" id="portfolio">
<div class="col-lg-6 col-sm-6" id="portfolio-left">
</div>
<div class="col-lg-6 col-sm-6" id="portfolio-right">
<div id="slider">
<ul>
<li style="background-color: #F00"></li>
<li style="background-color: #0F0"></li>
<li style="background-color: #00F"></li>
</ul>
</div>
</div>
</section>
基本上，右侧面板是可拖动的。因此，如果向左或向右拖动，将出现一个新的颜色面板。目前，我使用li来保存不同的面板
<div id="slider">
<ul>
<li style="background-color: #F00"></li>
<li style="background-color: #0F0"></li>
<li style="background-color: #00F"></li>
</ul>
</div>
我现在所做的事情有点复杂。上面的每个li应该基本上充当更多数据的父级。因此，如果我采取上述措施，它可能会更像这样的东西
<div id="slider">
<ul>
<li style="background-color: #F00">
<ul>
<li style="background-color: #CCC"></li>
<li style="background-color: #5CB"></li>
</ul>
</li>
<li style="background-color: #0F0"></li>
<li style="background-color: #00F"></li>
</ul>
</div>
因此，从左向右滑动将控制主li项。然后我想要一个向上和向下滑动来控制li父项的子项。因此，如果我到达具有一些子数据的第一个li，则向上滑动将显示第一个子li，另一个向上滑动第二个等等。但是如果我执行右滑动则它将显示第二个父李。
希望我解释好了。这样的事情可能吗？
由于
答案 0 :(得分：4)
我稍微调整了你的代码。
Number.prototype.roundTo = function(nTo) {
nTo = nTo || 10;
return Math.round(this * (1 / nTo)) * nTo;
};
$(function() {
var slides = $('#slider ul').children('.par').length;
var slideWidth = $('#slider').width();
var min = 0;
var max = -((slides - 1) * slideWidth);
console.log("Slides: " + slides + ", Width: " + slideWidth + ", min: 0, max: " + max);
$("#slider ul").width(slides * slideWidth);
$("#slider ul").draggable({
axis: 'x',
drag: function(event, ui) {
if (ui.position.left > min) ui.position.left = min;
if (ui.position.left < max) ui.position.left = max;
},
stop: function(event, ui) {
$(this).animate({
left: (ui.position.left).roundTo(slideWidth)
});
}
});
var slideHeight = $('#ch-data').height();
var chelms = $('#ch-data').children().length;
var inmax = -((chelms - 1) * slideHeight);
var topin = slideHeight-50;
$("#ch-data").height(chelms * slideHeight);
$("#ch-data").width($('#ch-data li').width());
$('#ch-data').css({'top': topin+'px'});
$('#ch-data').draggable({
axis: 'y',
drag: function(event, ui){
/*console.log('ui.position.top = '+ui.position.top);
console.log('min = '+min);
console.log('inmax = '+inmax);*/
},
stop: function(event, ui) {
console.log('slideHeight = '+slideHeight);
console.log('min = '+min);
console.log('inmax = '+inmax);
console.log('ui.position.top = '+ui.position.top);
console.log('slideHeight-50 = '+topin);
console.log('(ui.position.top).roundTo(topin) = '+(ui.position.top).roundTo(topin));
if (ui.position.top > min) {
if (ui.position.top > (slideHeight/2)) {
ui.position.top = topin;
$(this).animate({
top: (ui.position.top).roundTo(topin)
});
console.log('if of > topin');
}else{
ui.position.top = min;
$(this).animate({
top: (ui.position.top).roundTo(slideHeight)
});
console.log('if of > min');
}
}else if (ui.position.top < inmax) {
ui.position.top = inmax;
$(this).animate({
top: (ui.position.top).roundTo(slideHeight)
});
console.log('if of > inmax');
}else{
$(this).animate({
top: (ui.position.top).roundTo(slideHeight)
});
console.log('else');
}
}
});
}); #portfolio {
background: #3aa756;
min-height: 100%;
height: 100%;
}
#portfolio-left {
background: #ccc;
display: inline-block;
min-height: 100vh;
padding-left: 0;
padding-right: 0;
}
#portfolio-right {
background: #ded;
min-height: 100vh;
padding-left: 0;
padding-right: 0;
float: right;
}
#portfolio #slider {
width: 400px;
overflow: hidden;
}
#slider ul {
list-style: none;
margin: 0;
padding: 0;
}
#ch-data{
width: 380px;
height: 100%;
}
#slider li.par {
width: 390px;
height: 100vh;
float: left;
}
#slider li {
width: 390px;
height: 100vh;
bottom: 0;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<section class="no-padding" id="portfolio">
<div class="col-lg-6 col-sm-6" id="portfolio-left">
</div>
<div class="col-lg-6 col-sm-6" id="portfolio-right">
<div id="slider">
<ul>
<li class="par" style="background-color: #F00">
<ul id="ch-data">
<li style="background-color: #CCC">inner1</li>
<li style="background-color: #5CB">inner2</li>
<li style="background-color: #58C">inner3</li>
</ul>
</li>
<li class="par" style="background-color: #0F0"></li>
<li class="par" style="background-color: #00F"></li>
</ul>
</div>
</div>
</section>
我减少了内li - s的宽度。这样你就可以看到父母的红色背景。如果我们为它们提供全宽，那么从右到左拖动将不会像我们预期的那样工作。我只遵循相同的代码/方法。这样你就能理解得很好。这只是为了说明。您可能需要相应地设置样式以获得更好的UI / UX结果。希望你明白了。
我已经更新了最新的代码。