How to set jQuery draggable min / max-left and min / max-right

Question

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

This is just the practice of creating front-end websites, since I just started learning web developers a little over a week ago. You can put html, css and javascript in the edit fields, and the page spits out in Output in the same way as the actual JSbin.

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

My idea to prevent this from happening:
1. get the current position of editboxes
2. Save the left / right position of the edit box if you resize it to 10% of the window width
3. set min / max left and right for the draggable div

And therefore the question. How to set max-left / right for draggable.

Also, any idea of ​​why dragging before the output div has difficulty dragging to the right.

Edit: how the site is structured. When you drag .drag (.resize in my JSbin code), it changes the left and right divs left and right. And draggables are contained in the #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>

Run codeHide result

Answer 1

jQuery Ui, draggable-, , .

:

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 , .

Answer 2

.

:

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

Answer 3

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);
  }
}

- / .

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;
}

<!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>

Hide result

JSBin .