如何设置jQuery draggable min / max-left和min / max-right
我制作了JSbin的练习副本，JSbin 链接在这里 ，实际站点链接在这里 。
这只是制作网站前端的一种做法，因为我刚刚开始在一周前开始学习网络开发。 您可以在编辑框中放入html，css和javascript，并在Output中吐出一个页面，就像实际的JSbin一样。
但问题是你可以调整div传递其他div的大小。
我想防止这种情况发生的想法是：
1.获取编辑框的当前位置
2.如果resize为10％窗口宽度，则存储编辑框的左/右位置
3.为可拖动的div设置最小/最大左右
因此问题。 如何设置可拖动的最大左/右。
此外，任何关于为什么在输出div之前拖动的想法很难向右拖动。
编辑：网站的结构。 当你拖动.drag（我的JSbin代码中的.resize）时，它会左右移动它的左右div。 而draggables包含在#main的div中。
//drag this left and right to change the right of the HTML and left of CSS //drag this left and right to change the right of the Css and left of JavaScript //drag this left and right to change the right of the JavaScript and left of Output 通过利用jQuery Ui内置的可拖动事件，它为我们提供位置信息，并允许我们设置拖动位置。
我提出了以下解决方案：
var dragDistance = 100; $(".resize").draggable({ axis: "x", containment: "parent", drag: function( event, ui){ ui.position.left = Math.min( ui.position.left, ui.helper.next().offset().left + ui.helper.next().width()-dragDistance); ui.position.left = Math.max(ui.position.left, ui.helper.prev().offset().left + dragDistance); resize(); } });
我在此过程中删除了你的onDrag函数，因此它不会干扰。
在这里看到垃圾箱：
JSBin
笔记：
-
我没有调查它，也许它只是一个JSBin问题，因为我无法在你的实时网站上重现它。 但是如果在拖动代码时边界线消失将无法正常工作。 您可能必须将拖动距离增加到拖动时线条不会消失的点。
-
您可能会注意到拖动输出框似乎是由内部的Iframe引起的。 如果我注释掉IFrame，我可以拖动它就好了。 我没有寻找解决方案，但可能会尝试一些填充或边距，以便Iframe不会与边界紧密挂钩。 或者也许如果你在拖动时将它从DOM中分离出来就可以修复它。
使用遏制
约束拖动到指定元素或区域的范围内。
对于Eg：
$( ".selector" ).draggable({ containment: "parent" });
点击这里进行演示
您可以在dragging()函数中手动跟踪每个窗口的位置，如果它们不重叠，则只调用resize()方法：
function dragging(event) { var CSS_left = parseInt($("#CSS").css("left")); var JavaScript_left = parseInt($("#JavaScript").css("left")); var Output_left = parseInt($("#Output").css("left")); var offset = 100; var checkOverlap1 = $(event.target).is("#1") && event.clientX + offset <= JavaScript_left && event.clientX >= offset; var checkOverlap2 = $(event.target).is("#2") && event.clientX + offset <= Output_left && event.clientX - offset >= CSS_left; var checkOverlap3 = $(event.target).is("#3") && event.clientX - offset >= JavaScript_left && event.clientX <= codeboxWidth - offset; if (checkOverlap1 || checkOverlap2 || checkOverlap3) { resize(event); } }
这是完整的例子 - 我还重构/简化了你的“resize”function。
var codeboxWidth = $("#codebox").width(); $(document).ready(function() { $("#codebox").height($(window).height() - $("#topbar").height()); $(".content").height($("#codebox").height()); $(".editbox").height($(".content").height() - $(".contentheader").height()); $("#HTML").css("left", 0); $("#HTML").css("right", "75%"); $("#CSS").css("left", "25%"); $("#CSS").css("right", "50%"); $("#JavaScript").css("left", "50%"); $("#JavaScript").css("right", "25%"); $("#Output").css("left", "75%"); $("#Output").css("right", 0); }); function resize(event) { if ($(event.target).is("#1")) { $("#CSS").css("left", event.clientX); $("#HTML").css("right", codeboxWidth - event.clientX); } if ($(event.target).is("#2")) { $("#JavaScript").css("left", event.clientX); $("#CSS").css("right", codeboxWidth - event.clientX); } if ($(event.target).is("#3")) { $("#Output").css("left", event.clientX); $("#JavaScript").css("right", codeboxWidth - event.clientX); } } $(".resize").draggable({ axis: "x" }); function dragging(event) { var CSS_left = parseInt($("#CSS").css("left")); var JavaScript_left = parseInt($("#JavaScript").css("left")); var Output_left = parseInt($("#Output").css("left")); var offset = 100; var checkOverlap1 = $(event.target).is("#1") && event.clientX + offset <= JavaScript_left && event.clientX >= offset; var checkOverlap2 = $(event.target).is("#2") && event.clientX + offset <= Output_left && event.clientX - offset >= CSS_left; var checkOverlap3 = $(event.target).is("#3") && event.clientX - offset >= JavaScript_left && event.clientX <= codeboxWidth - offset; if (checkOverlap1 || checkOverlap2 || checkOverlap3) { resize(event); } }
body { margin: 0; padding: 0; overflow-y: hidden; overflow-x: hidden; background: #F7F7F7; font-family: Arial; } #topbar { margin: 0; padding: 0; width: 100%; height: 35px; background: #EEEEEE; position: relative; } h2 { margin: 2px 0 0 0; padding: 0; float: left; position: absolute; } #control { width: 100%; margin: 8px 0 0 0; padding: 0; position: absolute; text-align: center; } .option { margin: 0 -5px 0 0; padding: 5px 10px 5px 10px; text-align: center; border-top: 1px solid #CCC; border-bottom: 1px solid #CCC; border-left: 1px solid #CCC; text-decoration: none; font-size: 0.9em; color: black; } .option:first-child { border-bottom-left-radius: 5px; border-top-left-radius: 5px; } .option:last-child { border-right: 1px solid #CCC; border-bottom-right-radius: 5px; border-top-right-radius: 5px; } .option:hover { background: #dee5e5; } .opactive { background: #EBF3FF; } .opinactive { background: 0; } .active { display: block; } .inactive { display: none; } #codebox { margin: 0; padding: 0 width: 100%; position: static; top: 35px; background: white; } .content { margin: 0; padding: 0; min-width: 10%; max-width: 100%; position: absolute; float: left; color: #6DCAFC; background: #F7F7F7; overflow: hidden; } .resize { top: 35px; bottom: 0px; width: 1px; margin-left: 0; height: 100%; right: auto; opacity: 0; position: absolute; cursor: ew-resize; border-left-width: 1px; border-left-style: solid; border-left-color: rgba(218, 218, 218, 0.498039); z-index: 99999; background: #666; } .contentheader { margin: 0; padding: 0; background: transparent; position: relative; } .selectedcontent { background: white; } .contentbox { width: 100%; height: 100%; background: transparent; position: relative; box-sizing: border-box; border-right: 1px solid darkgrey; overflow: hidden; } .editbox { width: 100%; height: 100%; background: transparent; overflow: hidden; } .textareabox { background: transparent; min-width: 100%; max-width: 100%; min-height: 100%; max-height: 100%; border: none; outline: none; resize: none; }
Project 04 Code Runner
HTML CSS JavaScript Output