Why two DIVs can not be draggable under parent DIV?

user_14059194 0
Viewed 69

I have written some code according to project requirement and in that I need to present notes that lets user to write.

The notes are draggable and can be moved in certain areas.

When I tried to add more than one note, only one note is able to be dragged, the rest are not able to be dragged.

The notes are comming under parent DIV. And each note has its own DIV. Please point out my mistakes and guide me. Thank you.

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

html jquery javascript
2 Answers

in html ID should be unique, you can't use same ID for more then one element.

change your Selector from $("#draggable").draggable({ to $(".ui-widget-content").draggable({ this will work correctly.

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

check here working fiddle

user_129166910

HTML id should be unique. Try rename second note's id and provide draggable interaction as well.

user_105054490
Related