javascript - 使用按钮创建可拖动的 div

Question

我正在使用 .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";


        }

标签： javascriptjqueryhtmlcssdraggable

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