javascript - 如何设置 jQuery 可拖动最小/最大左和最小/最大右

Question

为了练习，我复制了一份JSbin，JSbin link here , 实地link here .

这只是制作网站前端的练习，因为我一周前才开始学习网络开发。您可以在编辑框中输入 html、css 和 javascript，然后在 Output 中吐出一个页面，就像实际的 JSbin 一样。

但问题是您可以通过其他 div 调整 div 的大小。

我想防止这种情况发生的想法是:
1. 获取编辑框的当前位置
2. 如果调整大小为 10% 窗口宽度，则存储编辑框的左/右位置
3.设置可拖动div的左右最小/最大

问题由此而来。如何设置可拖动对象的最大左/右值。

此外，关于为什么 Output div 之前的 draggable 难以拖动到右侧的任何想法。

编辑:网站的结构。当您拖动 .drag(我的 JSbin 代码中的 .resize)时，它会改变其左右 div 的左右。可拖动对象包含在#main 的 div 中。

<div id="main>
  <div id="HTML"></div>
                
  <div class="drag"></div> //drag this left and right to change the right of the HTML and left of CSS
                     
  <div id="CSS"></div>
               
  <div class="drag"></div> //drag this left and right to change the right of the Css and left of JavaScript
                     
  <div id="JavaScript"></div>
                      
  <div class="drag"></div> //drag this left and right to change the right of the JavaScript and left of Output
                     
  <div id="Output"></div>
</div>

Answer 1

通过利用 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

注意事项:

1. 我没有调查它，也许它只是一个 JSBin 问题，因为我无法在您的实时站点中重现它。但是，如果在拖动时边界线消失了，代码将不起作用。您可能需要增加拖动距离，使拖动时线条不会消失。

2. 您可能会注意到您难以拖动输出框，这似乎是由您内部的 Iframe 引起的。如果我注释掉 IFrame，我就可以拖动它了。我还没有寻找解决方案，但可能会尝试使用一些填充或边距，以便 Iframe 不会与边框如此紧密地 Hook 。或者，如果您在拖动时将其与 DOM 分离，则可能会修复它。