Sortable "grid"

Sortable "grid"

Hello,

I've started today trying to get a piece of code working:

  1. <html>
    <head>

      <style>
      #sortable1 { list-style-type: none; margin: 0; padding: 0;}
      #sortable1 li { margin: 5px; padding: 5px; font-size: 1.2em; width: 120px; background-color:yellow;}
     
      #sortable2 { list-style-type: none; margin: 0; padding: 0; width:100%;}
      #sortable2 li { float:left; margin: 5px; padding: 5px; font-size: 1.2em; width: 120px; background-color:green;}
      </style>
      <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
      <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
      <script>
      $( function() {
        $( "#sortable1, #sortable2").sortable({
          connectWith: "ul",
          cancel: ".ui-state-disabled"
        });
     
        $( "#sortable1, #sortable2").disableSelection();
      } );
      </script>
    </head>
    <body>
     
    <ul id="sortable1">
      <li class="ui-state-default">+</li>
      <li class="ui-state-default">-</li>
    </ul>
     
     <br/><br/>
     
    <ul id="sortable2">
      <li class="ui-state-highlight ui-state-disabled">1</li>
      <li class="ui-state-highlight ui-state-disabled">2</li>
      <li class="ui-state-highlight ui-state-disabled">3=6</li>
    </ul>
     
     
    </body>
    </html>
In this example, I want to to give the user the possibility, to add "plus" and "minus" in order to solve the equation 1_2_3=6. Therefore I blocked moving the numbers, but allow to move "+" and "-". However, there are two problems:

First, in the code given above, moving doesn't work, as the numbers are side by side (done by float:left in #sortable2 li). If I remove float:left, it works. Is there any trick, that it will also work, when the numbers are side by side and not on below the other?

Second, in this equation, it would be necessary to use two "+" to solve it: 1+2+3=6. Is it possible to remain a copy the operator + or -, that he can be used more than one time? When I looked in the manual, I found the command "clone", but I was not able to do this. Is this the right command and can you give me an example, of how it would work?

Thanks for your help!
Thomas