如何使Divs独立

时间：2019-07-16 09:57:05

标签： javascript html css 

function createDiv() {
  var yellowButton = document.getElementById("yellowColor");
  var newNote = document.createElement('div');


	document.getElementById('theText1').innerHTML = document.getElementById("textOfNote").value;
    newNote.innerHTML = document.getElementById('theText1').innerHTML;
    document.getElementById("canvas").appendChild(newNote);
    newNote.style.display = "inline-block";
    newNote.className = "segments";
  
  newNote.classList.add('draggable');
  $('.draggable').draggable({
    containment: "canvas"
  });

  newNote.classList.add('resizable');
  $('.resizable').resizable(); 

}


function genPDF() {
var doc = new jsPDF();
          var specialElementHandlers = {
         '#editor': function (element, renderer) {
        return true;
    }
};

         doc.fromHTML($('#canvas').html(), 15, 15, {
         'width': 170,
         'elementHandlers': specialElementHandlers
    });
    doc.save('sample-file.pdf');


}
<script src="app.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/0.9.0rc1/jspdf.min.js"></script>

<!-- <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> -->
<link rel="stylesheet" href="https://resources/demos/style.css">

  <style>

  .draggable {
    cursor: move;
  }

  .segments {
    display: block;
    border : 1px solid black;
    font-family: "Montserrat";
	  font-weight: 200;
    word-wrap: break-word;
    white-space: pre-wrap;
  }

  #yellowNoteStyle {
    /*
   width: 400px;
   height: 400px;
   margin: 10px;
   */
   display: block;
	 font-family: "Montserrat";
	 font-weight: 200;
   word-wrap: break-word;
   white-space: pre-wrap;
  
  }
</style>

<link rel="stylesheet" type="text/css" href="app.css">

<head>
<title> Minimal Cheatsheet Builder </title>
</head>
<left>
  <h1> cheat it - minimal cheatsheet builder</h1>
</left>

<style>
    .indent-1 {float: left;}
    .indent-1 section {width: 50%; float: left;}
</style>

<section class="indent-1">
    <!-- Section 1 --> 
    <section id="addnote">
    <div>
      <left>
        <form action="mainpage.php" method="post">
          <h3> Insert onto cheatsheet. </h3>
          <textarea id="textOfNote"></textarea>
          <br/>
          <br/>
          <table style="display:none">
            <tr>
              <td> <input type="radio" name="color" value="yellow" id="yellowColor" /> </td>
            </tr>

            <tr>
              <td>
                <div id="yellowNoteStyle"> </div>
              </td>
            </tr>

          </table>
          <br/>
        </form>
      </left>
    </div>

    <div id="create">
      <button onClick="createDiv()">Create Segment</button>
    </div>


    <div id="trash" style="width:50mm; height:50mm">
      <h3>trashcan</h3>
    </div>
  </section>

  <script>
  $( function() {
    $( "#trash" ).droppable({
      drop: function( event, ui ) {
        ui.draggable.remove();
      }
    });
  } );
  </script>

    <!-- Section 2 -->
    <section>
        <div id="canvas" style="width: 297mm; height: 210mm"></div>

        
        <button id="gen" onClick="genPDF()">generate PDF</button>

    </section>
</section> 

<br>


<div id="yellowNote" style="display: none;">
  <div id="yellowNoteStyle" ></div>
    <p><span id='theText1'></span></p>
  </div>
</div>

我制作了一个简单的Web应用程序，可让您创建动态div

您可以在此处查看该应用的外观： 调整大小之前 https://imgur.com/JOgCPKh 调整大小后 https://imgur.com/VERc4PV

当按下创建细分按钮时，会在旧div旁边创建一个新的div

通过这种方式添加的这些动力学div可以由jQuery使用jQuery ui的可拖动和可调整大小的方法来拖动和调整大小。

可拖动功能运行良好，但不可调整大小。似乎div是依赖项，并且当您尝试调整其大小时，它取决于其他动态div的大小。

function createDiv() {
  var yellowButton = document.getElementById("yellowColor");
  var newNote = document.createElement('div');


    document.getElementById('theText1').innerHTML = document.getElementById("textOfNote").value;
    newNote.innerHTML = document.getElementById('theText1').innerHTML;
    document.getElementById("canvas").appendChild(newNote);
    newNote.style.display = "inline-block";
    newNote.className = "segments";

  newNote.classList.add('draggable');
  $('.draggable').draggable({
    containment: "canvas"
  });

  newNote.classList.add('resizable');
  $('.resizable').resizable(); 

}

1 个答案:

答案 0 :(得分：0)

您为什么评论jquery ui CSS？删除评论，它将起作用。

 <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">



function createDiv() {
  var yellowButton = document.getElementById("yellowColor");
  var newNote = document.createElement('div');


	document.getElementById('theText1').innerHTML = document.getElementById("textOfNote").value;
    newNote.innerHTML = document.getElementById('theText1').innerHTML;
    document.getElementById("canvas").appendChild(newNote);
    newNote.style.display = "inline-block";
    newNote.className = "segments";
  
  newNote.classList.add('draggable');
  $('.draggable').draggable({
    containment: "canvas"
  });

  newNote.classList.add('resizable');
  $('.resizable').resizable(); 

}


function genPDF() {
var doc = new jsPDF();
          var specialElementHandlers = {
         '#editor': function (element, renderer) {
        return true;
    }
};

         doc.fromHTML($('#canvas').html(), 15, 15, {
         'width': 170,
         'elementHandlers': specialElementHandlers
    });
    doc.save('sample-file.pdf');


}
<script src="app.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/0.9.0rc1/jspdf.min.js"></script>

   <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
<link rel="stylesheet" href="https://resources/demos/style.css">

  <style>

  .draggable {
    cursor: move;
  }

  .segments {
    display: block;
    border : 1px solid black;
    font-family: "Montserrat";
	  font-weight: 200;
    word-wrap: break-word;
    white-space: pre-wrap;
  }

  #yellowNoteStyle {
    /*
   width: 400px;
   height: 400px;
   margin: 10px;
   */
   display: block;
	 font-family: "Montserrat";
	 font-weight: 200;
   word-wrap: break-word;
   white-space: pre-wrap;
  
  }
</style>

<link rel="stylesheet" type="text/css" href="app.css">

<head>
<title> Minimal Cheatsheet Builder </title>
</head>
<left>
  <h1> cheat it - minimal cheatsheet builder</h1>
</left>

<style>
    .indent-1 {float: left;}
    .indent-1 section {width: 50%; float: left;}
</style>

<section class="indent-1">
    <!-- Section 1 --> 
    <section id="addnote">
    <div>
      <left>
        <form action="mainpage.php" method="post">
          <h3> Insert onto cheatsheet. </h3>
          <textarea id="textOfNote"></textarea>
          <br/>
          <br/>
          <table style="display:none">
            <tr>
              <td> <input type="radio" name="color" value="yellow" id="yellowColor" /> </td>
            </tr>

            <tr>
              <td>
                <div id="yellowNoteStyle"> </div>
              </td>
            </tr>

          </table>
          <br/>
        </form>
      </left>
    </div>

    <div id="create">
      <button onClick="createDiv()">Create Segment</button>
    </div>


    <div id="trash" style="width:50mm; height:50mm">
      <h3>trashcan</h3>
    </div>
  </section>

  <script>
  $( function() {
    $( "#trash" ).droppable({
      drop: function( event, ui ) {
        ui.draggable.remove();
      }
    });
  } );
  </script>

    <!-- Section 2 -->
    <section>
        <div id="canvas" style="width: 297mm; height: 210mm"></div>

        
        <button id="gen" onClick="genPDF()">generate PDF</button>

    </section>
</section> 

<br>


<div id="yellowNote" style="display: none;">
  <div id="yellowNoteStyle" ></div>
    <p><span id='theText1'></span></p>
  </div>
</div>

相关问题
最新问题