Question

我一直在网站和网上搜索，但似乎找不到任何帮助。我的问题是我需要创建一个按下按钮创建一个新div框的功能，并且div框需要可拖动和可编辑。

function makeNote(e) {

    // Check the event object if the .click is on the canvas
    // or a created note
    if (e.eventPhase === 2) {

        // Create the new comment at the corsor postition
        var $newbox = $('<div class="ui-widget-content" id="newbox" style="top:' + e.pageY + 'px; left: ' + e.pageX + 'px;"><span id="close">Delete comment</span><p>Your comment:</p><textarea></textarea></div>');
        $('#canvas').append($newbox);
        $newbox.draggable();

    }

}


function deleteNote() {
    $(this).parent('#newbox').remove();
}

// wait until the dom document is loaded
jQuery(document).ready(function () {

    // listen for a .click() event on the canvas element
    $('#canvas').click(function (e) {
        makeNote(e);
    });

    // Remove the note
    $("#close").click(function () {
        deleteNote();
    });

});

html, body { 
    background-color: #cccccc;
    margin: 0;
    padding: 0;
    height: 100%;
    position: relative;
}

#newbox {
    position: absolute;
    background-color: white;
    height: 200px;
    width: 200px;
    box-shadow: 10px 10px 10px #888;
    padding: 20px;
    z-index: 1000;
}
textarea {
    background: transparent;
    width: 200px;
    height: 180px;
    border: 0;
}
#canvas {
    height:auto !important;
    min-height: 100%;
    height:100%;
    z-index: -1000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" scr="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="JavaScript.js"></script>
    <link rel="stylesheet" ahref="StyleSheet1.css" />
    </head>
    <body>
    <div id="canvas">
    </div>

</body>
</html>

Answer 1

draggable是jquery-ui库的一部分。不是jquery。

将<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>添加到您的代码中。

＆＃13;

function makeNote(e) {

    // Check the event object if the .click is on the canvas
    // or a created note
    if (e.eventPhase === 2) {

        // Create the new comment at the corsor postition
        var $newbox = $('<div class="ui-widget-content" id="newbox" style="top:' + e.pageY + 'px; left: ' + e.pageX + 'px;"><span id="close">Delete comment</span><p>Your comment:</p><textarea></textarea></div>');
        $('#canvas').append($newbox);
        $newbox.draggable();

    }

}


function deleteNote() {
    $(this).parent('#newbox').remove();
}

// wait until the dom document is loaded
jQuery(document).ready(function () {

    // listen for a .click() event on the canvas element
    $('#canvas').click(function (e) {
        makeNote(e);
    });

    // Remove the note
    $("#close").click(function () {
        deleteNote();
    });

});

＆＃13;

html, body { 
    background-color: #cccccc;
    margin: 0;
    padding: 0;
    height: 100%;
    position: relative;
}

#newbox {
    position: absolute;
    background-color: white;
    height: 200px;
    width: 200px;
    box-shadow: 10px 10px 10px #888;
    padding: 20px;
    z-index: 1000;
}
textarea {
    background: transparent;
    width: 200px;
    height: 180px;
    border: 0;
}
#canvas {
    height:auto !important;
    min-height: 100%;
    height:100%;
    z-index: -1000;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="JavaScript.js"></script>
    <link rel="stylesheet" ahref="StyleSheet1.css" />
    </head>
    <body>
    <div id="canvas">
    </div>

</body>
</html>

＆＃13;

Answer 2

由于您使用jQuery，您可以使用jQuery UI中的.draggable()和contenteditable="true"：

＆＃13;

function addNew() {
  var field = $('<div contenteditable="true">Text</div>')
  
  field.appendTo('#fields').draggable();
}

＆＃13;

#fields div {
  border: 1px dashed #ddd;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>


<button onClick="addNew()">Add new field</button>
<hr/>
<div id="fields"></div>

＆＃13;

Answer 3

我想注意一些事情。

永远不要对元素使用相同的ID。
对脚本生成的元素使用jquery .on函数。
永远不要使用box-shadow：D

＆＃13;

function makeNote(e) {

    // Check the event object if the .click is on the canvas
    // or a created note
    if (e.eventPhase === 2) {

        // Create the new comment at the corsor postition
        var $newbox = $('<div class="ui-widget-content" id="newbox'+e.pageX+e.pageY+'"><span class="close">Delete comment</span><p>Your comment:</p><textarea></textarea></div>');
        
        $('#canvas').append($newbox);
        $($newbox).css({
          'top' : ($('#canvas').height() / 2 - 150 + sequentCounter++) + 'px' ,
          'left' : ($('#canvas').width() / 2 - 100 + rowSeqCounter + sequentCounter++) + 'px' 
        });
        $newbox.draggable({cancel : '.close'});
    }

}
var sequentCounter = 1;
var rowSeqCounter = 1;
// wait until the dom document is loaded
jQuery(document).ready(function () {

    // listen for a .click() event on the canvas element
    $('#div_element_maker').click(function (e) {
      if (sequentCounter > 70){
        sequentCounter = 1;
        rowSeqCounter += 11;
        if (rowSeqCounter > 50)
          rowSeqCounter = 1;
        }
        makeNote(e);
    });

    // Remove the note
    $('#canvas').on('click',".close", function () {
        $(this).parent().remove()
    });

});

＆＃13;

html, body { 
    background-color: #cccccc;
    margin: 0;
    padding: 0;
    height: 100%;
    position: relative;
}

.ui-widget-content {
    position: absolute;
    background-color: white;
    height: 180px;
    width: 185px;
    border: 1px solid darkgray;
    /*box-shadow: 10px 10px 10px #888;*/
    padding: 20px;
    z-index: 1000;
}
textarea {
    background: transparent;
    width: 180px;
    height: 100px;
    border: 1px solid darkgray;
}
#canvas {
    height:auto !important;
    min-height: 100%;
    height:100%;
    z-index: -1000;
}
.close{
    cursor: pointer;
    background: red;
}
#div_element_maker{
    cursor: pointer;
    background: green;
    padding: 10px;
    margin: 10px;
    color: white;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" scr="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="JavaScript.js"></script>
    <link rel="stylesheet" ahref="StyleSheet1.css" />
    </head>
    <body>
    <div id="canvas">
    <span id="div_element_maker">make element</span>
    </div>

</body>
</html>

＆＃13;

JavaScript发布便笺无法创建新的div框

3 个答案: