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.