drag and drop issue jquery

Question

I have the code below using the script i am making stuff draggable and droppable. currently i have two pieces for draggable content, and two place they can be dropped if correct then the system will change and say correct, I would like to know if there is away that i would be able just create the HTML divs and the code runs through and matches the draggable to the dropable. I have people that have a non-technical backdround, have basic HTML knowledge so thy now how to add divs and remove them but they are able to deal with script, i would like to know, if i had ID of 1-10 for the draggable content and the same for the dropable 1-10 so id 1 draggable can only be added to id one droppable.

<meta charset="utf-8">
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
  <script src="https://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
  <link rel="stylesheet" href="hhtps:/resources/demos/style.css">
  <style>
  #droppable,#droppable2 { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
  #draggable, #draggable2 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
  </style>
  <script>
  $(function() {
    $( "#draggable, #draggable2" ).draggable();


    $( "#droppable" ).droppable({
      accept: "#draggable",
      drop: function( event, ui ) {
        $( this )
          .removeClass("ui-widget-header")
          .addClass( "ui-state-highlight" )
          .find( "p" )
            .html( "Dropped!" );
      },
      out: function( event, ui ) {
        $( this ).removeClass( "ui-state-highlight" ).addClass( "ui-widget-header" )
          .find( "p" )
            .html( "accept" );
      }
    });

  $( "#droppable2" ).droppable({
      accept: "#draggable2",
      drop: function( event, ui ) {
        $( this )
          .removeClass("ui-widget-header")
          .addClass( "ui-state-highlight" )
          .find( "p" )
            .html( "Dropped!" );
      },
      out: function( event, ui ) {
        $( this ).removeClass( "ui-state-highlight" ).addClass( "ui-widget-header" )
          .find( "p" )
            .html( "accept" );
      }
    });

  });
  </script>

<div id="draggable2" class="ui-widget-content">
  <p>I'm draggable but can't be dropped</p>
</div>

<div id="draggable" class="ui-widget-content">
  <p>Drag me to my target</p>
</div>

<div id="droppable" class="ui-widget-header">
  <p>accept: '#draggable'</p>
</div>

<div id="droppable2" class="ui-widget-header">
  <p>accept: '#draggable2'</p>
</div>

Answer 1

You will need to avoid using HTML id for this and start using classes. Here is how to do that, with a working example :

Your HTML:

<div id="draggable_2" class="ui-widget-content draggable-item">
    <p>draggable_2</p>
</div>
<div id="draggable" class="ui-widget-content draggable-item">
    <p>draggable</p>
</div>
<div class="ui-widget-header droppable-item" data-accept="#draggable">
    <p></p>
</div>
<div class="ui-widget-header droppable-item" data-accept="#draggable_2">
    <p></p>
</div>
<div class="ui-widget-header droppable-item" data-accept="#draggable_3">
    <p></p>
</div>

Your javascript:

$(function () {
    $(".draggable-item").draggable();

    $('.droppable-item').each(function (i, ele) {
        // Gets the accepted from the HTML property "data-accept"
        var accept = $(this).data('accept');

        // This is just to show what the item accepts. you can remove it.
        $(this).find('p').text('accepts: ' + accept);

        // Init the jQuery UI droppable()
        $(this).droppable({
            accept: accept,
            drop: function (event, ui) {
                $(this)
                    .removeClass("ui-widget-header")
                    .addClass("ui-state-highlight")
                    .find("p")
                    .html("Dropped!");
            },
            out: function (event, ui) {
                $(this).removeClass("ui-state-highlight").addClass("ui-widget-header")
                    .find("p")
                .html("accept: " + accept);
            }
        });
    });
});

Answer 2

If I understand your question correctly, you want every draggable to be droppable only its droppable and no other droppable div.

You've already achieved this by adding the accept: "#draggable" in your code for every droppable .

You can add this extra line of code so that if your draggable is dropped anywhere other than its droppable, it will go back to its droppable. $( "#draggable, #draggable2" ).draggable({ revert: "invalid" });

This code can be shortened if you added the same class (like class=draggables to every draggable html element and then you can juse use $( ".draggables" ).draggable({ revert: "invalid" }); to mark them all.

Here is a jsfiddle to show the example.