如何设置jQuery draggable min / max-left和min / max-right [英] How to set jQuery draggable min/max-left and min/max-right

问题描述

我制作了JSbin的练习副本，JSbin 在这里链接 ，实际网站此处链接。

I made a copy of JSbin for practice, JSbin link here, actual site link here.

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

This is just a practice for making the front-end of websites as I just started learning web dev little over a week ago. You can put in html, css and javascript in the editboxes, and a page spit out in Output just like the actual JSbin.

但问题是你可以调整大小div传递其他div。

But the problem is that you can resize the divs pass other divs.

我想防止这种情况发生的想法是：

1.获取编辑框的当前位置

2.如果调整大小为10％窗口宽度，则存储编辑框的左/右位置

3.为可拖动的div设置左/右的最小/最大值

My idea to prevent this from happening is:
1. get the editboxes' current positions
2. store the left/right position of the editbox if resized to 10% window width
3. set the min/max left and right for the draggable div

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

And hence the question. How do I set the max-left/right for the draggable.

此外，任何关于为什么输出div之前的拖动都难以向右拖动的想法。

Also, any idea on why the draggable before Output div is diificult to drag to the right.

编辑：网站的结构。当你拖动.drag（我的JSbin代码中的.resize）时，它会左右移动它的左右div。而draggables包含在#main的div中。

How the site is structured. When you drag the .drag (.resize in my JSbin code), it changes its left and right div's left and right. And the draggables are contained in the #main's 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>

推荐答案

利用jQuery Ui内置的dragg能够为我们提供位置信息并且还允许我们设置阻力位置的事件。

By taking advantage of jQuery Ui's built in draggable event which gives us position information and also allows us to set position on drag.

我想出了以下解决方案：

I came up with the following solution:

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函数，因此它不会干扰。

I removed your onDrag function in the process so it wouldn't interfere.

在此处查看垃圾箱：

JSBin

注意：

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

1. I haven't looked into it and maybe its just a JSBin issue because I can't reproduce it in your live site. But if the boundary lines disappear while you are dragging the code won't work. You'll probably have to increase the drag distance to the point where the lines don't disappear while dragging.

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

You may notice you have difficulty dragging the Output box that seems to be caused by the Iframe you have inside. If I comment out the IFrame I can drag it just fine. I haven't looked for a solution but perhaps experiment with some padding or margins so that the Iframe is not pegged so closely against the border. Or maybe if you detached it from the DOM while dragging that would fix it.

这篇关于如何设置jQuery draggable min / max-left和min / max-right的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！