如何设置jQuery draggable min/max-left和min/max-right

Question

我制作了JSbin的练习副本,JSbin 链接在这里,实际站点链接在这里.

这只是制作网站前端的一种做法,因为我刚刚开始在一周前开始学习网络开发.你可以在编辑框中放入html,css和javascript,并在Output中吐出一个就像实际的JSbin一样.

但问题是你可以调整div调整其他div的大小.

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

因此问题.如何设置可拖动的最大左/右.

此外,任何关于为什么在输出div之前拖动的想法很难向右拖动.

编辑:网站的结构.当你拖动.drag(我的JSbin代码中的.resize)时,它会左右移动它的左右div.而draggables包含在#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 函数，因此它不会干扰。

请参阅此处的垃圾箱：

杰士宾

笔记：

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

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