如何使 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(); 
}
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://i.stack.imgur.com/i50Cf.jpg调整大小后https://i.stack.imgur.com/pWkI9.jpg

按下"创建分段"按钮时，将在旧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(); 
}

你为什么评论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>

相关内容

最新更新

热门标签：