javascript - 为什么两个DIV不能在父DIV下拖动？

Question

我已经根据项目要求编写了一些代码，其中我需要提供让用户编写的注释。

笔记是可拖动的，可以在特定区域移动。

当我尝试添加多个音符时，只有一个音符可以拖动，其余的都无法拖动。

注释在父 DIV 下。每个笔记都有自己的 DIV。请指出我的错误并指导我。谢谢。

$(function () {
    $("#draggable").draggable({
        containment : 'parent',
        handle: "p",
        start: function (event, ui) {
            $(this).css('background-color', 'rgb(221, 251, 120);');
        },
        stop: function (event, ui) {
            $(this).css('background-color', 'rgb(227, 250, 150)');
        }
    });
    $("div, p").disableSelection();
});

.wrap {
    width: 77vw;
    height: 87vh;
}

#draggable{
    width: 300px;
    height: 300px;
    position: absolute;
    background: rgb(227, 250, 150);
    border: none;
    border-radius: 5px 5px 0px 0px;
}

#draggable p {
    cursor: move;
}

#draggable-header p{
    background: rgb(80, 80, 80);
    height: 30px;
    width: 300px;
    color: white;
    font-weight: 500;
    padding: 5px;
    border-radius: 5px 5px 0px 0px;
}

#draggable textarea{
    background: transparent;
    resize: none;
    padding: 5px;
    padding-left: 10px;
    width: 300px;
    height: 300px;
    border: none;
    font-weight: 500;
}

<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.0/jquery-ui.min.js"
  integrity="sha256-eGE6blurk5sHj+rmkfsGYeKyZx3M4bG+ZlFyA7Kns7E="
  crossorigin="anonymous"></script>
<div class="wrap">
     <div id="draggable" class="ui-widget-content">
          <div id="draggable-header">
               <p class="ui-widget-header">Note name1</p>
          </div>
     </div>
     <div>
          <textarea placeholder="Message" id="w3review" class="ui-widget-header" name="w3review" rows="1" cols="2"></textarea>
     </div>

     <div id="draggable" class="ui-widget-content">
          <div id="draggable-header">
               <p class="ui-widget-header">Note name2</p>
          </div>
     </div>
     <div>
          <textarea placeholder="Message" id="w3review" class="ui-widget-header" name="w3review" rows="1" cols="2"></textarea>
     </div>
</div>

Answer 1

在 html 中，ID 应该是唯一的，不能对多个元素使用相同的 ID。

将您的选择器从 $("#draggable").draggable({ 更改为 $(".ui-widget-content").draggable({ 这将正常工作。

$(function () {
$(".ui-widget-content").draggable({
    containment : 'parent',
    handle: "p",
    start: function (event, ui) {
        $(this).css('background-color', 'rgb(221, 251, 120);');
    },
    stop: function (event, ui) {
        $(this).css('background-color', 'rgb(227, 250, 150)');
    }
  });
  $("div, p").disableSelection();
});

检查这里工作 fiddle