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();
}
答案 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>