滑塊不會上下滑動

Question

這是左右滑塊比較的代碼。

誰能幫我讓它從上到下工作？

我讓它從左到右工作，但我需要它從上到下。

我試圖做出一些改變，但沒有結果。 這是 Codepen 的滑塊。

 // Call & init $(document).ready(function() { $('.ba-slider').each(function() { var cur = $(this); // Adjust the slider var width = cur.width() + 'px'; cur.find('.resize img').css('width', width); // Bind dragging events drags(cur.find('.handle'), cur.find('.resize'), cur); }); }); // Update sliders on resize. // Because we all do this: i.imgur.com/YkbaV.gif $(window).resize(function() { $('.ba-slider').each(function() { var cur = $(this); var width = cur.width() + 'px'; cur.find('.resize img').css('width', width); }); }); function drags(dragElement, resizeElement, container) { // Initialize the dragging event on mousedown. dragElement.on('mousedown touchstart', function(e) { dragElement.addClass('draggable'); resizeElement.addClass('resizable'); // Check if it's a mouse or touch event and pass along the correct value var startX = (e.pageX) ? e.pageX : e.originalEvent.touches[0].pageX; // Get the initial position var dragWidth = dragElement.outerWidth(), posX = dragElement.offset().left + dragWidth - startX, containerOffset = container.offset().left, containerWidth = container.outerWidth(); // Set limits var minLeft = containerOffset + 10; var maxLeft = containerOffset + containerWidth - dragWidth - 10; // Calculate the dragging distance on mousemove. dragElement.parents().on("mousemove touchmove", function(e) { // Check if it's a mouse or touch event and pass along the correct value var moveX = (e.pageX) ? e.pageX : e.originalEvent.touches[0].pageX; var leftValue = moveX + posX - dragWidth; // Prevent going off limits if (leftValue < minLeft) { leftValue = minLeft; } else if (leftValue > maxLeft) { leftValue = maxLeft; } // Translate the handle's left value to masked divs width. var widthValue = (leftValue + dragWidth / 2 - containerOffset) * 100 / containerWidth + '%'; // Set the new values for the slider and the handle. // Bind mouseup events to stop dragging. $('.draggable').css('left', widthValue).on('mouseup touchend touchcancel', function() { $(this).removeClass('draggable'); resizeElement.removeClass('resizable'); }); $('.resizable').css('width', widthValue); }).on('mouseup touchend touchcancel', function() { dragElement.removeClass('draggable'); resizeElement.removeClass('resizable'); }); e.preventDefault(); }).on('mouseup touchend touchcancel', function(e) { dragElement.removeClass('draggable'); resizeElement.removeClass('resizable'); }); }

 .ba-slider { position: relative; overflow: hidden; } .ba-slider img { width: 100%; display: block; } .resize { position: absolute; top: 0; left: 0; height: 100%; width: 50%; overflow: hidden; } .handle { /* Thin line seperator */ position: absolute; left: 50%; top: 0; bottom: 0; width: 4px; margin-left: -2px; background: rgba(0, 0, 0, 0.5); cursor: ew-resize; } .handle:after { /* Big orange knob */ position: absolute; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; content: '\\21d4'; color: white; font-weight: bold; font-size: 36px; text-align: center; line-height: 64px; background: #ffb800; /* @orange */ border: 1px solid #e6a600; /* darken(@orange, 5%) */ border-radius: 50%; transition: all 0.3s ease; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3), inset 0 2px 0 rgba(255, 255, 255, 0.5), inset 0 60px 50px -30px #ffd466; /* lighten(@orange, 20%)*/ } .draggable:after { width: 48px; height: 48px; margin: -24px 0 0 -24px; line-height: 48px; font-size: 30px; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="ba-slider"> <img src="https://i.imgur.com/9JWNlfH.jpg" alt=""> <div class="resize"> <img src="https://i.imgur.com/GS86OpZ.jpg" alt=""> </div> <span class="handle"></span> </div>

js +css-code 在 codepen 上..我無法在這里加載它（抱歉）

Answer 1

我真的不應該這樣做，因為這是編碼更改而不是編碼問題，但我對如何去做很感興趣。

我已將所有寬度計算更改為高度以及從左到上的所有位置。 我也對 CSS 進行了類似的調整。

 // Call & init $(document).ready(function(){ $('.ba-slider').each(function(){ var cur = $(this); // Adjust the slider var height = cur.height()+'px'; cur.find('.resize img').css('height', height); // Bind dragging events drags(cur.find('.handle'), cur.find('.resize'), cur); }); }); // Update sliders on resize. // Because we all do this: i.imgur.com/YkbaV.gif $(window).resize(function(){ $('.ba-slider').each(function(){ var cur = $(this); var height = cur.height()+'px'; cur.find('.resize img').css('height', height); }); }); function drags(dragElement, resizeElement, container) { // Initialize the dragging event on mousedown. dragElement.on('mousedown touchstart', function(e) { dragElement.addClass('draggable'); resizeElement.addClass('resizable'); // Check if it's a mouse or touch event and pass along the correct value var startY = (e.pageY) ? e.pageY : e.originalEvent.touches[0].pageY; // Get the initial position var dragHeight = dragElement.outerHeight(), posY = dragElement.offset().top + dragHeight - startY, containerOffset = container.offset().top, containerHeight = container.outerHeight(); // Set limits minTop = containerOffset + 10; maxTop = containerOffset + containerHeight - dragHeight - 10; // Calculate the dragging distance on mousemove. dragElement.parents().on("mousemove touchmove", function(e) { // Check if it's a mouse or touch event and pass along the correct value var moveY = (e.pageY) ? e.pageY : e.originalEvent.touches[0].pageY; topValue = moveY + posY - dragHeight; // Prevent going off limits if ( topValue < minTop) { topValue = minTop; } else if (topValue > maxTop) { topValue = maxTop; } // Translate the handle's left value to masked divs height. heightValue = (topValue + dragHeight/2 - containerOffset)*100/containerHeight+'%'; // Set the new values for the slider and the handle. // Bind mouseup events to stop dragging. $('.draggable').css('top', heightValue).on('mouseup touchend touchcancel', function () { $(this).removeClass('draggable'); resizeElement.removeClass('resizable'); }); $('.resizable').css('height', heightValue); }).on('mouseup touchend touchcancel', function(){ dragElement.removeClass('draggable'); resizeElement.removeClass('resizable'); }); e.preventDefault(); }).on('mouseup touchend touchcancel', function(e){ dragElement.removeClass('draggable'); resizeElement.removeClass('resizable'); }); }

 .ba-slider { position: relative; overflow: hidden; } .ba-slider img { width: 100%; display:block; } .resize { position: absolute; top:0; left: 0; height: 50%; width: 100%; overflow: hidden; } .handle { /* Thin line seperator */ position:absolute; left:0; top:50%; bottom:0; width:100%; height:4px; margin-left:-2px; background: rgba(0,0,0,.5); cursor: ns-resize; } .handle:after { /* Big orange knob */ position: absolute; top: 50%; left:50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; content:'\\21D5'; color:white; font-weight:bold; font-size:36px; text-align:center; line-height:64px; background: #ffb800; /* @orange */ border:1px solid #e6a600; /* darken(@orange, 5%) */ border-radius: 50%; transition:all 0.3s ease; box-shadow: 0 2px 6px rgba(0,0,0,.3), inset 0 2px 0 rgba(255,255,255,.5), inset 0 60px 50px -30px #ffd466; /* lighten(@orange, 20%)*/ } .draggable:after { width: 48px; height: 48px; margin: -24px 0 0 -24px; line-height:48px; font-size:30px; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="ba-slider"> <img src="https://placeimg.com/640/480/animals" alt=""> <div class="resize"> <img src="https://placeimg.com/640/480/people" alt=""> </div> <span class="handle"></span> </div>