Показать сообщение отдельно
  #9 (permalink)  
Старый 20.12.2017, 17:27
Интересующийся
Отправить личное сообщение для alixan23 Посмотреть профиль Найти все сообщения от alixan23
 
Регистрация: 26.10.2017
Сообщений: 16

ksa, вот набросанный примерчик

$( function()
      {

          $( "#sortable" ).sortable({
              revert: true
          });


          $( "#draggable3" ).draggable({
              connectToSortable: "#sortable",
              helper: "clone",
              revert: "invalid"
          });

          $( "ul, li" ).disableSelection();




          $(".add_field_button").click(function(e)
          {
              e.preventDefault();
              $(".input_fields_wrap").append('<div>' +
                  '                   key:   <input type="text" name="key[]"/>' +
                  '                   value: <input type="text" name="field[]"/>' +
                  '                   <a href="#" class="remove_field">Remove</a>' +
                  '               </div>');

          });

          $(".input_fields_wrap").on("click",".remove_field", function(e)
          {
              e.preventDefault();
              $(this).parent('div').remove();
              console.log("xxx: "+$(this).parent('div'));
          });

      });




<ul>
    <li id="draggable3" class="ui-state-highlight">
        <table cellpadding="2" cellspacing="2" border="0">
            <tr>
                <td colspan="2">SELECT</td>
            </tr>

            <tr>
                <td>Label:</td>
                <td><input name="label[]"></td>
            </tr>
            <tr>
                <td>Name:</td>
                <td><input name="name[]"></td>
            </tr>
            <tr>
                <td valign="top">Options:</td>
                <td>
                    <div class="input_fields_wrap">

                        key:   <input type="text" name="key[]">
                        value: <input type="text" name="field[]">
                        <button class="add_field_button" >+</button>
                    </div>


                </td>
            </tr>


        </table>
    </li>
</ul><br><br>
    <ul id="sortable">
        <li class="ui-state-default">test1</li>
        <li class="ui-state-default">test2</li>
    </ul>




Как видно из кода. Вначале элемент select можно клонировать путём Drag&Drop. После клонирования, с кнопочкой + можно увеличить количество Option.

Кнопочка "+" у клонированных элементов не работает.
Ответить с цитированием