使用按钮创建可拖动的 div答案

【问题标题】：Using button to create draggable div使用按钮创建可拖动的 div
【发布时间】：2018-12-09 07:00:52
【问题描述】：

我正在使用 .draggable 创建一个可拖动的 div（便笺），但我似乎无法弄清楚如何使每个元素都可拖动。这是我的创建 div 函数。如何创建将创建可拖动 div 的按钮？谢谢！

    $(function() {
        $( "#draggable" ).draggable();
     });


function createDiv() {
        var yellowButton = document.getElementById("yellowColor");
        var greenButton = document.getElementById("greenColor");
        var blueButton = document.getElementById("blueColor");
        var purpleButton = document.getElementById("purpleColor");



        var newNote = document.createElement('div');
        if (yellowButton.checked) {
            document.getElementById('theText1').innerHTML = document.getElementById("textOfNote").value;
            newNote.innerHTML = document.getElementById('yellowNote').innerHTML;
            document.body.appendChild(newNote);
            newNote.style.display = "inline-block";
            newNote.id="draggable";

        } 
        if (greenColor.checked) {
            document.getElementById('theText2').innerHTML = document.getElementById("textOfNote").value;
            newNote.innerHTML = document.getElementById('greenNote').innerHTML;
            document.body.appendChild(newNote);
            newNote.style.display = "inline-block";


        } 
        if(blueColor.checked) {
            document.getElementById('theText3').innerHTML = document.getElementById("textOfNote").value;
            newNote.innerHTML = document.getElementById('blueNote').innerHTML;
            document.body.appendChild(newNote);
            newNote.style.display = "inline-block";


        }
        if(purpleColor.checked) {
            document.getElementById('theText4').innerHTML = document.getElementById("textOfNote").value;
            newNote.innerHTML = document.getElementById('purpleNote').innerHTML;
            document.body.appendChild(newNote);
            newNote.style.display = "inline-block";


        }

【问题讨论】：

你能添加你的 HTML 吗？
jsfiddle.net/1no67erk
jsfiddle.net/1no67erk/1
这行得通吗？基本上我正在尝试使用按钮创建一个可拖动的 div，基于用户选择的单选按钮，以及用户输入的内容，但我不知道如何添加此功能。
是的，这应该可以。我会看看我是否能想出任何一种解决方案

标签： javascript jquery html css draggable

【解决方案1】：

您可以使用jQuery UI 的可拖动方法来实现这一点。只需将 .draggable 类应用于您创建的笔记，然后应用：

$('.draggable').draggable({
  containment: "document"
});

使用class="draggable" 使所有元素都可拖动。

查看工作示例：

function createDiv() {
  var yellowButton = document.getElementById("yellowColor");
  var greenButton = document.getElementById("greenColor");
  var blueButton = document.getElementById("blueColor");
  var purpleButton = document.getElementById("purpleColor");



  var newNote = document.createElement('div');
  if (yellowButton.checked) {
    document.getElementById('theText1').innerHTML = document.getElementById("textOfNote").value;
    newNote.innerHTML = document.getElementById('yellowNote').innerHTML;
    document.body.appendChild(newNote);
    newNote.style.display = "inline-block";
    newNote.className = "ui-widget-content";

  }
  if (greenColor.checked) {
    document.getElementById('theText2').innerHTML = document.getElementById("textOfNote").value;
    newNote.innerHTML = document.getElementById('greenNote').innerHTML;
    document.body.appendChild(newNote);
    newNote.style.display = "inline-block";


  }
  if (blueColor.checked) {
    document.getElementById('theText3').innerHTML = document.getElementById("textOfNote").value;
    newNote.innerHTML = document.getElementById('blueNote').innerHTML;
    document.body.appendChild(newNote);
    newNote.style.display = "inline-block";


  }
  if (purpleColor.checked) {
    document.getElementById('theText4').innerHTML = document.getElementById("textOfNote").value;
    newNote.innerHTML = document.getElementById('purpleNote').innerHTML;
    document.body.appendChild(newNote);
    newNote.style.display = "inline-block";


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

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

<style>
  .draggable {
    cursor: move;
  }
  #yellowNoteStyle {
    width: 110px;
    height: 110px;
    background: #FDFB8C;
    border: 1px solid #DEDC65;
    margin: 10px;
  }
  
  #greenNoteStyle {
    width: 110px;
    height: 110px;
    background: #A5F88B;
    border: 1px solid #98E775;
    margin: 10px;
  }
  
  #blueNoteStyle {
    width: 110px;
    height: 110px;
    background: #A6E3FC;
    border: 1px solid #75C5E7;
    margin: 10px;
  }
</style>
<center>
  <h1> Your virtual corkboard!</h1>
</center>



<legend>Welcome admin! </legend>
<fieldset>
  <section id="addnote">
    <div>
      <center>
        <form action="mainpage.php" method="post">
          <h3> What do you want the note to say? </h3>
          <textarea id="textOfNote"></textarea>
          <br/>
          <b> Choose Note Color </b>
          <br/>
          <table>
            <tr>
              <td> <input type="radio" name="color" value="yellow" id="yellowColor" /> </td>
              <td> <input type="radio" name="color" value="green" id="greenColor" /> </td>
              <td> <input type="radio" name="color" value="blue" id="blueColor" /> </td>
              <td> <input type="radio" name="color" value="purple" id="purpleColor" /> </td>

            </tr>

            <tr>
              <td>
                <div id="yellowNoteStyle"> </div>
              </td>
              <td>
                <div id="greenNoteStyle"> </div>
              </td>
              <td>
                <div id="blueNoteStyle"> </div>
              </td>
              <td>
                <div style="width:100px;  height: 100px; background:#c58cf7; border: 1px solid #75C5E7;margin: 0 auto;width: 100px;"> </div>
              </td>

            </tr>

          </table>
          <br/>



        </form>
      </center>
    </div>


    <div id="create">
      <button onClick="createDiv()">Insert onto the Corkboard</button>
    </div>
</fieldset>
<br>

<div id="yellowNote" style="display: none;">
  <div id="yellowNoteStyle" class="ui-widget-content">
    <p><span id='theText1'></span></p>
  </div>

</div>

<div id="greenNote" style="display: none;">
  <div id="greenNoteStyle" class="ui-widget-content">
    <p><span id='theText2'></span></p>
  </div>

</div>
<div id="blueNote" style="display: none;">
  <div id="blueNoteStyle" class="ui-widget-content">
    <p><span id='theText3'></span></p>
  </div>

【讨论】：

别担心！！很高兴为您提供帮助
@Sansan 嗨，是的，有一种方法可以让你做到这一点，但它需要你像你说的那样使用一些 php 和 ajax。因此，一旦用户登录，您就可以在他们创建新笔记时随时更新他们的数据库记录。 stop: function( event, ui ) {} 您还可以添加此属性以在每次将笔记移动到新位置时更新数据库中笔记的位置。我过去只简单地使用过 ajax，所以我不是该领域的专家，我建议你可能会打开一个新问题，突出你已经尝试过的内容以及你正在尝试做的事情 :)跨度>
是的，您也可以考虑使用 localStorage 来实现这一点。使用数据库可能是最直接的方式。