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

时间：2016-02-02 17:04:43

标签： javascript jquery html css jquery-ui

我制作了一份JSbin for practice，JSbin link here，实际网站link here。

这只是制作网站前端的一种做法，因为我刚刚开始在一周前开始学习网络开发。您可以在编辑框中放入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>

3 个答案:

答案 0 :(得分：2)

使用containment

  

约束拖动到指定元素的范围内或   区域。

     

例如： 

$( ".selector" ).draggable({
  containment: "parent"
});
  

Click Here参加演示

答案 1 :(得分：2)

利用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不会与边界紧密挂钩。或者也许如果您在拖动时将其与DOM分离，则会修复它。

答案 2 :(得分：0)

您可以手动跟踪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);
  }
}

以下是完整的示例 - 我还重构/简化了您的＆＃34;调整大小＆＃34;功能

＆＃13;
＆＃13; 
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);
  }
}
＆＃13; 
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;
}
＆＃13; 
<!DOCTYPE html>
<html>

<head>
  <title>Project 04</title>
  <link rel="stylesheet" type="text/css" href="styles.css">
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">

</head>

<body>
  <div id="topbar">
    <h2>Code Runner</h2>
    <div id="control">
      <a href="#" class="option opactive">HTML</a>
      <a href="#" class="option opactive">CSS</a>
      <a href="#" class="option opactive">JavaScript</a>
      <a href="#" class="option opactive">Output</a>
    </div>
  </div>

  <div id="codebox">
    <div id="HTML" class="content active">
      <div class="contentbox">
        <div class="contentheader">HTML</div>
        <div class="editbox" id="HTMLeditbox">
          <textarea id="HTMLcode" class="textareabox"></textarea>
        </div>
      </div>
    </div>

    <div class="resize active" id="1" style="left: 25%" ondrag="dragging(event)"></div>

    <div id="CSS" class="content active">
      <div class="contentbox">
        <div class="contentheader">CSS</div>
        <div class="editbox" id="CSSeditbox">
          <textarea id="CSScode" class="textareabox"></textarea>
        </div>
      </div>
    </div>

    <div class="resize active" id="2" style="left: 50%" ondrag="dragging(event)"></div>

    <div id="JavaScript" class="content active">
      <div class="contentbox">
        <div class="contentheader">JavaScript</div>
        <div class="editbox" id="JavaScripteditbox">
          <textarea id="JavaScriptcode" class="textareabox"></textarea>
        </div>
      </div>
    </div>

    <div class="resize active" id="3" style="left: 75%" ondrag="dragging(event)"></div>

    <div id="Output" class="content active">
      <div class="contentbox">
        <div class="contentheader">Output</div>
        <div class="editbox" id="Outputbox">

        </div>
      </div>
    </div>
  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>


  <script type="text/javascript" src="jscript.js"></script>
</body>

</html>
＆＃13;
＆＃13;
＆＃13;

Here's a JSBin based on your example.

相关问题
最新问题