JQuery 向各个方向拖动/滑动 div

Question

这是我目前的情况:

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">
  &nbsp;
  </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，另一个向上滑动将显示第二个，依此类推。但是，如果我向右滑动，它将显示第二个家长李。

希望我能解释清楚。这样的事情可能吗？

谢谢

Answer 1

我稍微调整了你的代码。

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">
  &nbsp;
  </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 结果。希望你明白了。

我已经更新了最新的代码。

• 现在我们可以从右到左、从左到右拖动
• 然后我们可以上下拖动子面板
• 我们甚至可以将其向下移动以隐藏子面板以显示父面板面板